移动端 REM 适配

最新推荐文章于 2024-04-05 13:49:27 发布

被楓吹过的晨

最新推荐文章于 2024-04-05 13:49:27 发布

阅读量827

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_66430291/article/details/123339554

版权

在使用 vant 完成移动端项目时, 如果需要使用 rem 单位实现适配 ( Vant 中的样式默认使用 px 单位), 推荐使用 lib-flexible (设置 rem 基准值) 和 postcss-pxtorem (将单位转化为 rem )

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

安装: yarn add amfe-flexible

导入: 在 main.js 文件中执行模块 import 'amfe-flexible'

二、使用 postcss-pxtorem 将 `px` 转为 `rem`

安装: yarn add postcss-pxtorem@5.1.1 -D

配置:

在项目根目录中创建 .postcssrc.js 或 postcss.config.js 文件

module.exports = {
  plugins: {
    //  自动添加浏览器前缀的 PostCss 插件
    'autoprefixer': {
      //  browsers 用来配置兼容的浏览器版本信息
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {  // 如果是vant的就按照375 尺寸， 如果是其他的(二倍设计图)就是按照750
        return file.indexOf('vant') !== -1 ? 37.5 : 75;  // rootValue 的值一般是设计稿1/10
      },
      propList: ['*'],
    },
  },
};