使用脚手架的移动端 rem 适配方案（建议收藏）

Dear 丶 2023-02-20 06:23 23阅读 0赞

## 使用脚手架的移动端 rem 适配方案 ##

###  ###

*   *  使用脚手架的移动端 rem 适配方案
     *   *  lib-flexible
     *  在这里插入图片描述
     *   *  postcss-pxtorem
     *  在这里插入图片描述
     *  在这里插入图片描述
     *   *  搭配ui框架使用(vant)

*  主要使用的到两个插件
    
     *  [lib-flexible][] 用于设置 rem 基准值
     *  [postcss-pxtorem][] 是一款 postcss 插件，用于将单位转化为 rem

### [lib-flexible][] ###

使用 [lib-flexible][] 动态设置 REM 基准值（html 标签的字体大小）

*  安装
    
     *  > 使用 npm i amfe-flexible
 *  引用
    
     *  在`main.js`入口文件引用该文件
     *  > import ‘amfe-flexible’
 *  之后`html`根元素中将自动根据屏幕大小添加不同的`font-size`

--------------------

## ![在这里插入图片描述][20200623204441261.png_pic_center] ##

![在这里插入图片描述][20200623204451260.png_pic_center]

--------------------

### [postcss-pxtorem][] ###

使用 [postcss-pxtorem][] 将 `px` 转为 `rem`

*  安装
    
     *  > 使用 npm i postcss-pxtorem
 *  使用
    
     *  在项目根目录创建文件`.postcssrc.js`
     *  在文件下添加以下代码
    
        module.exports = { 
          plugins: { 
            autoprefixer: { 
              browsers: ['Android >= 4.0', 'iOS >= 8']
            },
            'postcss-pxtorem': { 
              rootValue: 37.5,
              propList: ['*']
            }
          }
        }
    
     *  重新启动项目
     *  但是现在重启项目，可能(vue)会出现警告,但不影响项目的使用
    
    --------------------

## ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0R0X21hbg_size_16_color_FFFFFF_t_70_pic_center] ##

*  [autoprefixer][] 是一个自动添加浏览器前缀的 PostCss 插件，`browsers` 用来配置兼容的浏览器版本信息，但是写在这里的话会引起编译器警告
 *  我们只需要删除`autoprefixer`代码配置即可，vue的内部也实现了配置兼容的浏览器版本信息，所以不用担心删除之后的问题

--------------------

## ![在这里插入图片描述][20200623204622890.png_pic_center] ##

### 搭配ui框架使用(vant) ###

*  在开发中，可能会用到ui框架，那样就会有大概率出现字体基准字号不同的问题
    
     *  `VANT UI`基准字号为**37.5**,移动端设计稿一般为**750**
        
         *  这样就会导致，如果在配置文件中将`rootValue`属性设置为**37.5**时，当我们自身设置样式时，要将设计稿的样式除以2
         *  如果设置为**75**，当我们使用`ui`框架时，便会小一半
     *  所以我们需要动态设置基准字号
     *  `rootValue`属性支持用一个函数作为参数
        
         *  postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数
         *  它会把被处理的 CSS 文件相关的信息通过参数传递给该函数
     *  所以我们可以修改配置文件`.postcssrc.js`如下
    
        module.exports = { 
          // 配置要使用的 PostCSS 插件
          plugins: { 
            // 配置使用 postcss-pxtorem 插件
            // 作用：把 px 转为 rem
            'postcss-pxtorem': { 
              rootValue ({  file }) { 
                return file.indexOf('vant') !== -1 ? 37.5 : 75
              },
              propList: ['*']
            }
          }
        }

[lib-flexible]: https://github.com/amfe/lib-flexible
[postcss-pxtorem]: https://github.com/cuth/postcss-pxtorem
[20200623204441261.png_pic_center]: https://img-blog.csdnimg.cn/20200623204441261.png#pic_center
[20200623204451260.png_pic_center]: https://img-blog.csdnimg.cn/20200623204451260.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0R0X21hbg_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200623204520865.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0R0X21hbg==,size_16,color_FFFFFF,t_70#pic_center
[autoprefixer]: https://github.com/postcss/autoprefixer
[20200623204622890.png_pic_center]: https://img-blog.csdnimg.cn/20200623204622890.png#pic_center