让1px边框在移动端不再粗壮：彻底解决边框像素不适配问题

2024-01-17 16:12:57

移动端1px边框粗壮的原因

在移动端设备上，由于屏幕像素密度更高，导致1px的边框看起来会比设计稿中粗壮。这是因为，在设计稿中，1px通常是指一个物理像素，而在移动端设备上，1px可能对应多个物理像素。

解决方案

1. 使用viewport单位

viewport单位是CSS3中新增的一组单位，专门用于移动端设备的布局。viewport单位相对于视口（viewport）的宽度或高度，而不是物理像素。因此，使用viewport单位可以确保边框的粗细在不同设备上保持一致。

例如，以下代码将创建一个1像素的边框，无论设备的屏幕像素密度如何：

border: 1vw solid #ccc;

2. 使用postcss-px-to-viewport插件

postcss-px-to-viewport是一个PostCSS插件，可以将CSS中的px单位转换为vw单位。这可以让你在使用px单位时，也可以获得viewport单位的优势。

要使用postcss-px-to-viewport插件，你需要在你的项目中安装它：

npm install postcss-px-to-viewport --save-dev

然后，在你的PostCSS配置中添加以下代码：

const pxToViewport = require('postcss-px-to-viewport');

module.exports = {
  plugins: [
    pxToViewport({
      viewportWidth: 375, // 设计稿的宽度
      viewportHeight: 667, // 设计稿的高度
      unitPrecision: 5, // 转换后的精度，即小数点后保留几位
      viewportUnit: 'vw', // 希望使用的视口单位
      selectorBlackList: ['.ignore-px'], // 忽略转换的CSS选择器
      minPixelValue: 1, // 最小转换像素值
      mediaQuery: false // 是否在媒体查询中也转换
    })
  ]
};