移动端rem适配——单位适配

单位适配

一、使用lib-flexible动态设置rem基准值（html标签的字体大小）

1、安装

npm i amfe-flexible

2、在main.js中引入

// main.js
import 'amfe-flexible'

3、测试是否引入成功

// 在浏览器中切换不同的手机设备尺寸，观察html标签font-size的变化

二、使用postcss-pxtorem将px转为rem

该插件不能转换行内样式的px
如：<div style="width: 200px;"></div>

// -D 是 --save-dev的简写
npm i postcss-pxtorem -D

yarn add -D postcss-pxtorem

2、然后在项目根目录中创建 .postcssrc.js文件

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};

3、检查是否转换成功

// 在浏览器控制中查看html标签font-size单位