【自适应】postcss-pxtorem适配Web端页面

​

在进行页面开发时，自适应设计是一个关键的考虑因素。为了实现这一点，postcss-pxtorem是一个非常有用的工具，它可以将CSS中的px单位转换为rem单位，从而实现基于根元素字体大小的自适应布局。下面介绍一下在项目中如何引入并配置postcss-pxtorem。

技术栈：Vue（3.3.4）、TypeScript（5.0.4）

实现步骤

• 安装postcss-pxtorem

进入项目目录后，安装postcss-pxtorem：

npm install postcss-pxtorem

• 配置PostCSS

需要修改项目根目录下的vite.config.ts文件中进行，添加postcss-pxtorem的相关配置：

import postCssPxToRem from 'postcss-pxtorem'

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 16, // 指定转换基准值，通常是设计稿宽度的1/10
          propList: ['*'], // 可以从px转换为rem的属性，这里是所有属性
          unitPrecision: 5, // 允许REM单位增长到的十进制数
          selectorBlackList: [], // 选择器黑名单，忽略转换的选择器
          replace: true, // 替换包含rem的规则，而不是添加回退
          mediaQuery: false, // 允许在媒体查询中转换px
          minPixelValue: 0 // 设置要替换的最小像素值
        }),
      ]
    }
  },
})

• 在项目中使用

现在，我们可以在项目的CSS中使用px单位，postcss-pxtorem将自动把它们转换为rem。

/* 在你的组件或样式文件中 */
.container {
  width: 320px;
  height: 200px;
  padding: 16px;
  font-size: 14px;
}

 经过postcss-pxtorem的处理，上述CSS将被转换为：

.container {
  width: 20rem;
  height: 12.5rem;
  padding: 1rem;
  font-size: 0.875rem;
}

实现效果

​编辑

以上就是在项目中使用postcss-pxtorem自适应页面的实现啦^-^

​