rem解决多屏适配方案

rem解决多屏适配方案

项目是移动端，所以，它需要去适配不同的手机屏幕。我们希望实现适配的效果是：与屏幕大小相关。以按钮为例：在大屏手机，按钮的宽高都大些，在小屏手机上尺寸小些。

三方模块：

1. 把所有px单位改成rem，用 postcss-pxtorem 来实现，它是一款postcss插件，用于将px自动转化rem。

2. 根据不同的手机屏幕的宽度，来动态设置rem的参考值：html标签上的font-size的大小。用lib-flexible来实现，用于设置 rem 基准值

3. 注意点

   • 它对应的包名不是这个名字，而是amfe-flexible

   • 它需要是生产依赖

实现步骤

1. 下载

   // 后处理器 开发阶段使用
   yarn add postcss postcss-pxtorem@5.1.1 -D //作用：把px单位自动转成rem单位
   
   // 修改rem基准值的js插件   需要在打包后需要使用
   yarn add amfe-flexible 
   // 作用：根据设置屏幕的宽度去调整rem的值(html标签上font-size的大小)
   // 它的默认计算方式是屏幕宽度1/10，默认值是37.5
   

2. 设置postcss

   根目录下创建postcss.config.js文件，内容如下：

   module.exports = {
     plugins: {
       'postcss-pxtorem': {
         // 能够把所有元素的px单位转成Rem
         // rootValue: 转换px的基准值。
         // 例如一个元素宽是75px，则换成rem之后就是2rem。
         rootValue: 37.5,
         propList: ['*']
       }
     }
   }
   

3. 通过npm run serve 重启一下项目，他会把原来样式中的px单位自动转成rem单位

4. 引入flexible.js文件

   最后，入口文件main.js导入 amfe-flexiblec

   import 'amfe-flexible'