css移动端适配

一、移动端单位

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, 
    })
  ]
});