移动端REM适配

最新推荐文章于 2025-03-21 22:22:21 发布

旧友前度丶

最新推荐文章于 2025-03-21 22:22:21 发布

阅读量1k

点赞数

文章标签： postcss css vue.js

本文链接：https://blog.youkuaiyun.com/wangyangzxc123/article/details/121927856

版权

1. PostCss-Pxtorem 配置

yarn add -D postcss-pxtorem   // -D就是保存为开发依赖

2.创建 postcss.config.js 是PostCSS 的配置文件

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      // 根值：默认是37.5，来自于设计稿大小的10分之一
      rootValue: 37.5, // 根植
      propList: ['*']
    }
  }
}

3.其他设计搞尺寸

如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 rootValue 配置调整为:

module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*']
    }
  }
}

注意:

如果报错.可能原因是 postcss-pxtorem 版本过高

建议下载 postcss-pxtorem @5.1.1版本

4. amfe-flexible 的方法就是把一行分为十份.每分大小除以十根据设备匹配

npm i amfe-flexible
yarn add amfe-flexible 

man.js中
// 动态加载设置 REM 基准值
import 'amfe-flexible/index'

最后重新启动项目.查看是否转换为REM了.