px转rem----postcss

最新推荐文章于 2024-01-05 15:16:17 发布

minx_6688

最新推荐文章于 2024-01-05 15:16:17 发布

阅读量242

点赞数

本文链接：https://blog.csdn.net/mwh_user/article/details/106697581

版权

px转rem（pxtorem）

借助 postcss 的 pxtorem 这款插件来转换项目中的 px 单位为 rem 单位

postcss

postcss
是一个用 JavaScript 工具和插件转换 CSS 代码的工具。它主要是通过它的各种插件来实现效果。

postcss-pxtorem 使用方式

安装依赖

npm install --save-dev postcss-pxtorem

在项目根目录下创建一个 postcss.config.js 文件，来提供 postcss 的配置

module.exports = {
  plugins: {
    autoprefixer: { // 自动补全样式
      Browserslist: ['Android >= 4.0', 'iOS >= 8'],
    },
    'postcss-pxtorem': {
    // 这里设置多少 html元素就设置多少（控制rem），如果发现页面样式乱了可以设置body的 font-size 来解决 css 样式继承的问题。但是在屏幕大小改变时可能要做媒体查询来设置html元素的 font-size，来维持样式正常。所以往下看
    // 更好的方式用 https://github.com/amfe/lib-flexible 这里的index.js 这个文件实现 可伸缩布局方案，可以下载这个index.js文件到项目的静态资源文件中，然后在html中通过<script/>引入这个js文件
      rootValue: 37.5, // 转换的基准值 1rem = 37.5px
      propList: ['*'], // 设置哪些css属性的px需要被转换 * 代表全部
    },
  },
};