postcss 插件实现移动端适配
postcss-pxtorem 是一个 PostCSS 插件，它能够将 CSS 中的像素单位（px）转换为 rem 单位。这使得你可以直接按照设计稿的尺寸编写 CSS，并且通过这个插件自动转换为 rem，从而实现响应式布局，让页面在不同尺寸的设备上也能正确显示。
安装
bash
npm install postcss postcss-pxtorem --save-dev
# 或者
yarn add postcss postcss-pxtorem --dev配置介绍
rootValue
-
用途：定义
1rem相对于多少像素。通常这个值是根据设计稿的宽度和你希望的rem基准值来确定的。 -
示例：如果你的设计稿宽度是
750px，并且你希望每750px对应100rem，那么rootValue就应该是750 / 100 = 7.5。如果设计稿宽度为750px，每750px对应20rem，则rootValue为750 / 20 = 37.5。
propList
-
用途：指定哪些 CSS 属性应该被转换。默认情况下，只有某些常见的尺寸属性会被转换。
-
示例：['*'] 表示所有属性都会被转换；
['width', 'height']表示只有width和height属性会被转换。
selectorBlackList
-
用途：指定哪些 CSS 选择器不应该被转换。通常用来排除一些不需要转换为 rem 的样式。
-
示例：
['ignore-']表示所有以ignore-开头的选择器将不会被转换。
mediaQuery
-用途：指定是否在媒体查询中的 CSS 规则也应该被转换。
- 示例：true 表示媒体查询中的 CSS 规则也会被转换；
false表示媒体查询中的 CSS 规则不会被转换。
minPixelValue
-
用途：定义最小的像素值才会被转换为
rem。小于或等于这个值的像素将不会被转换。 -
示例：1 表示只有大于
1px的值才会被转换。
replace
-
用途：指定是否替换原有的
px值，还是在原有值的基础上追加rem值。 -
示例：true 表示替换原有的
px值；false表示保留原有的px值并在其基础上追加rem值。
unitPrecision
-
用途：定义转换后的
rem值的小数点后保留的位数。 -
示例：5 表示转换后的
rem值将保留5位小数。
配置
配置 postcss-pxtorem 插件可以通过多种方式完成，包括使用 .postcss 文件、package.json 文件或是在构建工具的配置文件中指定。
使用 .postcss 文件配置
在项目根目录创建一个 postcss.config.js 文件，并添加以下内容：
javascript
module.exports = {
"plugins": {
"postcss-pxtorem": {
"rootValue": 18.75, // 根据设计稿的宽度（假设设计稿宽度为375px，则1rem=375/20=18.75px）
"propList": ["*"], // 要转换的属性列表，"*" 表示所有属性
"selectorBlackList": ["ignore-"], // 忽略的选择器前缀
"mediaQuery": true, // 是否在媒体查询中也转换 px
"minPixelValue": 1, // 最小的 px 值才转换为 rem
"replace": true, // 是否替换而不是添加
"unitPrecision": 5 // 单位转换后的精度
}
}
}使用 Webpack 配置
如果你使用的是 Webpack，你可以在 webpack.config.js 中配置 PostCSS 插件：
javascript
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('postcss-pxtorem')({
rootValue: 18.75,
propList: ["*"],
selectorBlackList: ["ignore-"],
mediaQuery: true,
minPixelValue: 1,
replace: true,
unitPrecision: 5
})
]
}
}
}
]
}
// ...
]
}
// ...
};在 vue.config.js 配置
javascript
const pxtorem = require('postcss-pxtorem');
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
css: {
loaderOptions: {
postcss: {
plugins: [
pxtorem({
rootValue: 18.75, // 根据设计稿的宽度（假设设计稿宽度为375px，则1rem=375/20=18.75px）
propList: ['*'], // 要转换的属性列表，"*" 表示所有属性
selectorBlackList: ['ignore-'], // 忽略的选择器前缀
mediaQuery: true, // 是否在媒体查询中也转换 px
minPixelValue: 1, // 最小的 px 值才转换为 rem
replace: true, // 是否替换而不是添加
unitPrecision: 5 // 单位转换后的精度
})
]
}
}
}
})注意事项
-
根值（rootValue）：
rootValue应该根据你的设计稿尺寸来设定。例如，如果你的设计稿宽度是750px，并且你希望每750px对应100rem，那么rootValue就应该是750 / 100 = 7.5。但是，在上面的例子中，我们设定了rootValue为37.5，这是基于每750px对应20rem的情况。你需要根据你的实际设计稿尺寸和需求来调整这个值。 -
选择器黑名单（selectorBlackList）：如果你有一些样式不想被转换，可以将它们的选择器前缀添加到 selectorBlackList 中。
-
媒体查询（mediaQuery）：如果希望在媒体查询中的样式也被转换为
rem，确保mediaQuery设置为true。
使用示例
当你配置好 postcss-pxtorem 后，你可以在 CSS 文件中使用像素单位，而这些单位会被自动转换为 rem 单位。
javascript
/* 未转换前 */
.button {
width: 200px;
height: 40px;
font-size: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
}
/* 转换后 */
.button {
width: 10.66667rem;
height: 2.13333rem;
font-size: 0.64rem;
background-color: #007bff;
color: white;
border: none;
border-radius: 0.21333rem;
}上述配置的 1rem 为 18.75px, 转换后如下图所示
总结
将 CSS 中的像素单位 px 转换为 rem 单位，以便实现响应式布局。具体配置如下：
rootValue: 设置1rem相对于的像素值。假设设计稿宽度为750px，每750px对应100rem，则rootValue为7.5。propList: 指定哪些 CSS 属性应该被转换。['*']表示所有属性都将被转换。selectorBlackList: 指定哪些选择器不应被转换。['ignore-']表示所有以ignore-开头的选择器将不会被转换。mediaQuery: 指定是否在媒体查询中的 CSS 规则也应该被转换。true表示媒体查询中的规则也会被转换。minPixelValue: 定义最小的像素值才会被转换为rem。小于或等于这个值的像素将不会被转换。1表示只有大于1px的值才会被转换。replace: 指定是否替换原有的px值。true表示替换原有的px值。unitPrecision: 定义转换后的rem值的小数点后保留的位数。5表示转换后的rem值将保留5位小数。
通过这些配置，你可以确保 CSS 中的像素单位被正确转换为 rem 单位，从而实现更好的移动端适配。