移动端 REM 适配

Aaron Con

已于 2022-05-03 21:21:59 修改

阅读量86

点赞数

分类专栏： knowledge_point Demo流程文章标签： postcss vue.js 前端

于 2022-05-03 21:18:55 首次发布

本文链接：https://blog.csdn.net/weixin_47979372/article/details/124561729

版权

knowledge_point 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

Demo流程

5 篇文章 0 订阅

订阅专栏

本文介绍了在移动端项目中如何使用lib-flexible设置rem基准值，以及通过postcss-pxtorem将px转换为rem进行适配。详细步骤包括npm安装相关库，然后在main.js中引入lib-flexible，并配置postcss-pxtorem插件，特别指出该插件无法转换行内样式的px单位。文章还展示了具体的配置代码。

摘要由CSDN通过智能技术生成

在做移动端项目的时候需要对不同规格的设备进行rem适配

方法：

使用lib-flexible 用于设置 rem 基准值

// 安装
npm i amfe-flexible

// main.js中加载该模块
import 'amfe-flexible'

使用 postcss-pxtorem 将 px 转为 rem，但是该插件不能将行内样式px转为rem

// 安装
npm install postcss-pxtorem -D

// 配置
/**
 * PostCSS 配置文件
 */

module.exports = {
  // 配置要使用的 PostCSS 插件
  plugins: {
    // 配置使用 autoprefixer 插件
    // 作用：生成浏览器 CSS 样式规则前缀
    // VueCLI 内部已经配置了 autoprefixer 插件
    // 所以又配置了一次，所以产生冲突了
    // 'autoprefixer': { // autoprefixer 插件的配置
    //   // 配置要兼容到的环境信息
    //   browsers: ['Android >= 4.0', 'iOS >= 8']
    // },

    // 配置使用 postcss-pxtorem 插件
    // 作用：把 px 转为 rem
    'postcss-pxtorem': {
      rootValue ({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75
      },
      propList: ['*']
    }
  }
}