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 }