为什么要建设外贸网站精准信息300099
postcss 插件实现移动端适配
postcss-pxtorem 是一个 PostCSS 插件，它能够将 CSS 中的像素单位（px）转换为 rem 单位。这使得你可以直接按照设计稿的尺寸编写 CSS，并且通过这个插件自动转换为 rem，从而实现响应式布局，让页面在不同尺寸的设备上也能正确显示。
安装
npm install postcss postcss-pxtorem --save-dev
# 或者
yarn add postcss postcss-pxtorem --dev
GitCode项目地址: https://gitcode.com/gh_mirrors/po/postcss-pxtorem/overview?utm_source=artical_gitcode&index=top&type=card&webUrl&isLogin=1
配置介绍
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 文件，并添加以下内容：
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 插件：
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 配置
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, // 是否在媒体查询中也转换 pxminPixelValue: 1, // 最小的 px 值才转换为 remreplace: 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 单位。
/* 未转换前 */
.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 单位，从而实现更好的移动端适配。