Rem 布局适配postcss-pxtorem

小意、

已于 2022-06-13 19:33:03 修改

阅读量881

点赞数

CC 4.0 BY-SA版权

文章标签： postcss 前端

于 2022-06-13 19:16:44 首次发布

本文链接：https://blog.csdn.net/m0_71015996/article/details/125265789

本文介绍了如何借助postcss-pxtorem自动将px单位转换为rem，以实现响应式布局。通过安装插件、配置postcss.config.js、创建rem.js配置文件，并在main.js中引入，可以实现开发和生产环境的无缝适配，避免手动计算的繁琐过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目标

通过postcss-pxtorem来实现自动渲染px至rem的开发与生产工作
而不需要再手动计算

安装

$ npm install postcss postcss-pxtorem

配置文件

1、根目录创建postcss.config.js

//
// module.exports = {
//     plugins: {
//         'postcss-pxtorem': {

//             rootValue: 37.5,
//             unitPrecision: 5,
//             propList: ['*'],
//             // propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
//             selectorBlackList: [],
//             replace: true,
//             mediaQuery: false,
//             minPixelValue: 0,
//             // exclude: /node_modules/i
//         },
//     },
// };
//vant是375的设计稿，如果设计稿的尺寸不是 375，而是 750 或其他大小，可以将 rootValue 配置调整为:
module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {

        return fil