移动端REM适配

最新推荐文章于 2021-12-16 19:15:15 发布

原创最新推荐文章于 2021-12-16 19:15:15 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#postcss #css #vue.js

这篇博客介绍了如何配置PostCss-Pxtorem插件进行像素到REM单位的转换，包括在package.json中添加依赖，创建postcss.config.js文件并设置根值。还提到了针对不同设计稿尺寸的rootValue动态配置，并解决可能的版本问题。此外，文章也提及了amfe-flexible库在设置REM基准值上的应用，以及如何在项目中导入和使用。

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了.