0


postcss-pxtorem

Rem 布局适配

如果需要使用

rem

单位进行适配,推荐使用以下两个工具:

  • postcss-pxtorem 是一款 PostCSS 插件,用于将 px 单位转化为 rem 单位
  • lib-flexible 用于设置 rem 基准值

PostCSS 示例配置

下面提供了一份基本的 PostCSS 示例配置,可以在此配置的基础上根据项目需求进行修改。

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

一、概念

  postcss-pxtorem是PostCSS的插件,用于将像素单元生成rem单位。

二、使用

  安装依赖之后,将postcss-pxtorem的配置都放到了vue.config.js中。

module.exports = {
  productionSourceMap: false, // 生产环境是否生成 SourceMap
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require(‘postcss-pxtorem‘)({
                rootValue: 16,
                unitPrecision: 5,
                propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
                selectorBlackList: [],
                replace: true,
                mediaQuery: false,
                minPixelValue: 0,
                exclude: /node_modules/i
          }),
        ]
      }
    }
  },
}                            

三、参数解释

1)

rootValue

(Number | Function)表示根元素字体大小或根据

input

参数返回根元素字体大小。

2)

unitPrecision

(Number)允许REM单位增加的十进制数字。

3)

propList

(Array)可以从px更改为rem的属性。

  • 值必须完全匹配。
  • 使用通配符*启用所有属性。例:['*']
  • *在单词的开头或结尾使用。(['*position*']将匹配background-position-y
  • 使用!不匹配的属性。例:['*', '!letter-spacing']
  • 将“ not”前缀与其他前缀组合。例:['*', '!font*']

4)

selectorBlackList

(Array)要忽略的选择器,保留为px。

  • 如果value是字符串,它将检查选择器是否包含字符串。 - ['body'] 将匹配 .body-class
  • 如果value是regexp,它将检查选择器是否匹配regexp。 - [/^body$/]将匹配body但不匹配.body
5)replace

(Boolean)替换包含rems的规则。

6)

mediaQuery

(Boolean)允许在媒体查询中转换px。

7)

minPixelValue

(Number)设置要替换的最小像素值。

8)

exclude

(String, Regexp, Function)要忽略并保留为px的文件路径。

  • 如果value是字符串,它将检查文件路径是否包含字符串。 - 'exclude' 将匹配 \project\postcss-pxtorem\exclude\path
  • 如果value是regexp,它将检查文件路径是否与regexp相匹配。 - /exclude/i 将匹配 \project\postcss-pxtorem\exclude\path
  • 如果value是function,则可以使用exclude function返回true,该文件将被忽略。 - 回调函数会将文件路径作为参数传递,它应该返回一个布尔结果。- function (file) { return file.indexOf('exclude') !== -1; }

四、补充

  忽略单个属性的最简单方法是在像素单位声明中使用大写字母,将px写为Px。

  比如:

.ignore {
    border: 1Px solid; // ignored
    border-width: 2PX; // ignored
}

本文转载自: https://blog.csdn.net/qq_26695613/article/details/128069677
版权归原作者 书中自有妍如玉 所有, 如有侵权,请联系我们删除。

“postcss-pxtorem”的评论:

还没有评论