vue cil自适应

屏幕自适应插件

npm i amfe-flexible --save 复制代码

把px转成rem的插件（只能在css文件里面写 里面的）

npm i postcss-px2rem --save 复制代码

2、main.js引入

import rem from 'amfe-flexible' Vue.use(rem) 复制代码

3、package.json中添加如下代码： "remUnit":75表示 ui小姐姐给的图 是按照750px这个尺寸设计的

"postcss":{ "plugins":{ "autoprefixer":{}, "postcss-px2rem":{ "remUnit":75 } } } 复制代码

4、修改了 src路径不需要重启，但是修改了配置项 需要重新启动 npm run serve

5、需要在css中设置样式，在行内样式style里面写无效 .s1{ /* 30px/75=0.4rem */ font-size:30px; }

6、html的根元素 font-size会根据屏幕的变化而变化 但是元素rem值不会 效果：页面的尺寸也会根据屏幕的变化而变化

\
作者：25重for循环加身\
链接：https://juejin.cn/post/7048779526175719461\
来源：稀土掘金\
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。