怎么去做移动端的适配

适配方案一：rem+动态的font-size实现

 问题一：如何 针对不同的屏幕，设置html不同的font-size

   m. 通过媒体查询来设置不同尺寸范围内的屏幕html的font-size尺寸

  m. JS动态计算

   1. 根据html的宽度计算出font-size的大小，并设置到html上

   2. 监听页面宽度的实时变化，重新设置font-size到html上

 m.  使用lib-flexible库

// 先安装
npm i -S amfe-flexible

// 在页面处引用
<script src="./node_modules/amfe-flexible/index.js"></script>

问题二： 将原来要设置的尺寸，转化成rem单位，

•            使用postcss-pxtorem插件 

•   02. 在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 // 忽略的文件
      })
    ]
  };

  这样在页面上我们还是直接写px即可，打包后后自动更改的

• 2.使用VSCode插件 : px to rem 插件，会弹出转换提示 

适配方案二：vw适配     （相对于屏幕视口大小，屏幕宽 = 100vw）

使用vw 就没有rem的问题一了  只有问题二！！！

npm install postcss-px-to-viewport -D

在postcss.config.js中配置

二 使用VSCode插件 : px to rem 插件