移动端rem适配方案
rem适配
html {
// 屏幕为750 1rem = 100px 屏幕为375 1rem = 50px
font-size: 13.333vw;
}
// html设置的字号会被继承，所以需要给body重新设置font-size 设置为正常大小
body {
font-size: .16rem;
}
vue中使用插件rem适配：amfe-flexible、postcss-pxtorem
// 1、安裝amfe-flexible
yarn add amfe-flexible
// 2、在main.js中导入
import 'amfe-flexible'
// 3、安装postcss-pxtorem 指定5.1.1版本
yarn add postcss-pxtorem@5.1.1
// 4、在根目录创建.postcssrc.js文件 并配置375手写稿
module.exports = {
plugins: {
'autoprefixer': {
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
]
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
react中使用插件vw适配： postcss-px-to-viewport
// 1、安装插件
yarn add postcss-px-to-viewport
// 2、git本地提交文件
git add . // 添加文件
git commit -m 提交的提示信息 //将文件提交到本地仓库
// 3、使用yarn eject暴露webpack配置
yarn eject
// 4、在暴露出的文件config中找到webpack.config.js
// 5、ctrl+f 查询 flexbox，在这个require后面添加新的require
require('postcss-px-to-viewport')({
viewportWidth: 375, // (Number) The width of the viewport.
viewportHeight: 667, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: "vw", // (String) Expected units.
selectorBlackList: [], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false // (Boolean) Allow px to be converted in media queries.
}),
