前言 不同于UI框架，css框架主要的目的是更方便的写css，比UI框架更底层一些。 很多人，包括前端部门的人都和我说，UI框架，比如iview，antdv都可以很方便的做到自适应了，谁还手写css。 话虽然这么说，但是我觉得UI框架属于是做出了一种规范，他不可能包含所有的场景，公司出产品也不可能总是围绕着UI框架来处。 tailwindcss和windicss使用上基本相同，只是在效率上windicss高一些而已，所以我这里选择的是windicss。
引用
直接打开： windicss中文地址
他支持的非常多
使用
官方设计理念
首先官方推荐的设计理念是移动优先。 什么意思呢？举个官方例子：我想要字体偏左，手机上自己居中。 完成这个，常见的写法：@media screen and (max-width:860px)，写两套样式来达到不同的效果 而用这个框架，你需要做的是text-center sm:text-left，这个意思是，在手机屏幕上居中，大于sm的屏幕，字体居左。
配置文件和插件
创建windi.config.ts文件
import { defineConfig } from 'windicss/helpers'
export default defineConfig({
theme: {
extend: {
inset: {
'menu': '2.5%',
'smenu': '47.5%',
},
zIndex: {
'-999': '-999',
},
transitionProperty: {
height: 'height',
},
backgroundImage: {
'img-default': "url('https://media.inyaw.com/cover/7037ade43b1e484eac903a111b7ea709.jpg')",
'img-mobile-default': "url('https://media.inyaw.com/cover/14db2cf6e4b441368243b23722d212c9.png')",
},
transformOrigin: {
'top-left-bg': '0px 0px',
}
},
minWidth: {
'1/4': '25%',
},
spacing: {
'20p': '20%',
'95p': '95%'
}
},
plugins: [
require('windicss/plugin/typography'),
require('windicss/plugin/forms'),
],
})我直接偷懒贴了我的配置上来，plugins是引入插件，上面的是官方文档案例的自定义配置，具体可以看官方文档。
不知道写啥了，先讲到这