移动端适配方案

rem+动态font-size

需要解决两个问题：
一，如何动态得到font-size
二，如何转化rem

1，获取动态font-size

可以使用js动态获取

 // 拿到html元素
      const htmlDom = document.documentElement;
      console.log("dom", htmlDom);
      // 改变的函数
      function serRemFontSize() {
        // 拿到屏幕的宽度
        const htmlWidth = htmlDom.clientWidth;
        console.log("dom宽度", htmlWidth);
        // 计算fontsize的大小
        const htmlFontSize = htmlWidth / 10;
        // fontsize赋值到html上
        htmlDom.style.fontSize = htmlFontSize + "px";
        console.log(htmlWidth);
      }
      // 第一次进来时主动调用一下
      serRemFontSize();
      // 实时监听屏幕尺寸改变的函数
      window.addEventListener("resize", serRemFontSize);
      // 监听页面跳转(前进或者后退),重新设置一下
      window.addEventListener("pageshow", function (e) {
        if (e.persisted) {
          serRemFontSize();
        }
      });

可以使用lib-flexible库

npm install -S amfe-flexible 

进行导入即可
import ‘amfe-flexible’

2，如何转化为rem

可以使用postcss-pxtorem插件
webpack打包时自动转换

npm install postcss-pxtorem --save-dev

在postcss.config.js中配置

module.exports = {
  plugins: [
    require('postcss-preset-env'),
    // 使用这个插件
    require('postcss-pxtorem')({
      rootValue: 37.5, // 设计稿宽度的1/10
      propList: ['*'], // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
      exclude: /node_modules/i // 忽略的文件
    })
  ]
};

可以在vscode使用px to rem插件进行配置

在Cssrem:Root Font Size设置 视口 % 10