手机登录/注册
X
登录
相对于 rem 来说,vw 适配能更好的适配移动端,但如果既需要适配移动也需要适配 PC
vw 的适配在 pc 显示时会显得格外的大,
rem 就会相对好些,这里只针对一些简单页面解决方案,复杂项目会有专门的一套解决方案
npm i amfe-flexible postcss-pxtorem autoprefixer -S
由于
viewport
单位得到众多浏览器的兼容,lib-flexible
这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版本,都存有一定的问题。建议大家开始使用viewport
来替代此方。
import 'amfe-flexible/index.js'
将项目中css的px转成rem单位,免去计算烦恼
//.postcssrc.js
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7'],
},
'postcss-pxtorem': {
rootValue: 75,
propList: ['*', '!font-size'],
exclude: /node_modules|folder_name/i,
},
},
};
//postcss.config
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8",
"last 10 versions", // 所有主流浏览器最近10版本用
],
grid: true,
},
'postcss-pxtorem': {
//1rem等于100px
rootValue: 100,
propList: ['*'],
unitPrecision: 5,
//忽略 node_modules 目录,否则会导致 Vant 样式无法被编译。
exclude: /node_modules|folder_name/i,
}
}
}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
配置完之后,需要重启服务,运行即可看到都是 rem 的单位了