一、移动端单位
rem单位是相对于根元素html的font-size进行计算的
二、amfe-flexible+postcss-pxtorem方案(在vue框架下)
1、在页面 header标签中设置移动端视口
<header>
<meta name='viewport' content='width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no'>
</header>
2、安装 amfe-flexible ,并在main.js 主入口文件引入 amfe-flexible, 它会自动设置html的font-size为屏幕宽度除以10
npm install amfe-flexible --save
然后,在main.js 引入amfe-flexible
import 'amfe-flexible';
3、安装 第三方插件 postcss-pxtorem 会自动将css代码中的px单位根据规则转换成rem 单位
npm i postcss-pxtorem@5.1.1
然后,在项目根目录下创建postcss.config.js文件,设置如下配置
module.exports = () => ({
plugins: [
require('postcss-pxtorem')({
rootValue: 37.5,
propList: ["*"],
unitPrecision: 3,
minPixelValue: 1,
})
]
});