1、安裝兩個插件
屏幕自適應(yīng)插件
npm i amfe-flexible --save
把px轉(zhuǎn)成rem的插件
只能在css文件里面寫 <style>里面的
npm i postcss-px2rem --save
2玫膀、main.js引入
import rem from 'amfe-flexible'
Vue.use(rem)
3帚湘、package.json中添加如下代碼：
"remUnit":75表示 ui小姐姐給的圖 是按照750px這個尺寸設(shè)計的
"postcss":{
? ? "plugins":{
? ? ? "autoprefixer":{},
? ? ? "postcss-px2rem":{
? ? ? ? "remUnit":75
? ? ? }
? ? }
? }
4祈惶、修改了 src路徑不需要重啟稳摄，但是修改了配置項 需要重新啟動 npm run serve
5、需要在css中設(shè)置樣式万搔，在行內(nèi)樣式style里面寫無效
.s1{
? /* 30px/75=0.4rem */
? font-size:30px;
}
6择份、html的根元素 font-size會根據(jù)屏幕的變化而變化 但是元素rem值不會
效果：頁面的尺寸也會根據(jù)屏幕的變化而變化
