vue框架根據(jù)屏幕分辨率 及 縮放自適應(yīng)
1.配置package.json
"dependencies": {
"amfe-flexible": "^2.2.1",
"postcss-pxtorem": "^5.1.1"
},
2.配置main.js
import 'amfe-flexible'
3.增加配置postcss.config.js
module.exports = () => ({
plugins: [
// autoprefixer 自動補齊 CSS3 前綴，適配不同瀏覽器
require('autoprefixer')({
overrideBrowserslist: [
'last 10 versions', // 所有主流瀏覽器最近10版本用
],
}),
require('postcss-pxtorem')({
rootValue: 192.0, //設(shè)計稿元素尺寸/10固蛾，這里設(shè)計稿寬度為1920
propList: ['*'], //是一個存儲哪些將被轉(zhuǎn)換的屬性列表梭伐，這里設(shè)置為['*']全部砚作，假設(shè)需要僅對邊框進行設(shè)置牙言，可以寫['*', '!border*']
unitPrecision: 3, //保留rem小數(shù)點多少位
selectorBlackList: [], //則是一個對css選擇器進行過濾的數(shù)組锋边，比如你設(shè)置為['el-']薯嗤，那所有el-類名里面有關(guān)px的樣式將不被轉(zhuǎn)換绰寞，這里也支持正則寫法。
replace: true,
mediaQuery: false, //媒體查詢( @media screen 之類的)中不生效
// minPixelValue: 3, //px小于3的不會被轉(zhuǎn)換
}),
],
})
