当前位置：首页 > wzjs >正文

广州建设银行网站首页营销目标分为三个方面

wzjs 2025/8/2 2:05:56

广州建设银行网站首页,营销目标分为三个方面,知名品牌网站有哪些,个人简历word文档postcss 插件实现移动端适配 postcss-pxtorem 是一个 PostCSS 插件，它能够将 CSS 中的像素单位（px）转换为 rem 单位。这使得你可以直接按照设计稿的尺寸编写 CSS，并且通过这个插件自动转换为 rem，从而实现响应式布局&…

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 位小数。