移动端1px解决方案

2021年11月04日 12:54 · 阅读 840

这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战

在移动端web页面中，1px的问题是一个常见的问题，总结一些解决移动端web的1px方法以及对应API介绍

border-image

border-image CSS属性允许在元素的边框上绘制图像

语法

border-image: image-source image-height image-width image-repeat
复制代码

设置1px

.border-top {
  border-width: 1px;
  border-image: url('xxx') 2 repeat;
}
复制代码

使用 border-image 时，其将会替换掉border-style 属性所设置的边框样式。虽然规范要求使用 border-image时边框样式必须存在，但一些浏览器可能没有实现这一点。

特别注意，若 border-image-source（此值可用border-image-source或border-image简写设置) 的值为 none 或者图片不能显示，则将应用 border-style

优点：兼容性好

缺点：灵活性差，每次更改都需要更换图片

linear-gradient

利用渐变实现1px，50%黑色，50%透明

.border-top {
  background: linear-gradient(1deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat;
}
复制代码

优点：实现简单，颜色可控

缺点：无法实现圆角，有兼容性问题（现在兼容性问题基本可忽略）

box-shadow

box-shadow 属性用于在元素的框架上添加阴影效果，可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

在使用box-shadow时，需要注意不同数量的属性值代表不同的含义

如果只存在两个属性值，会将其作为offerset-x和offerset-y
如果存在三个属性值，会将前两位作为offerset-x和offerset-y，第三个值作为blur-radius
如果存在四个属性值，第四个将会作为spread-radius

.border-top {
  box-shadow: 0px -1px 1px -1px rgb(0 0 0 / 50%);
}
复制代码

优点：实现简单，颜色可控

缺点：颜色控制较为难拿捏，会有阴影描边出现

伪元素 + transfrom

如果直接对DOM使用transfrom进行缩放，会连带着内部的所有元素被缩放，影响原有的布局结构和字体大小，使用伪元素遍可以避免这个问题，因为伪元素::after或::before是独立于当前元素，可以单独对其缩放而不影响元素本身的缩放

.border-top {
  position: relative;
}

.border-top::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #000;
  transform: scaleY(.5);
  transform-origin: left top;
}
复制代码

由于现在市面存在多种DPR设备，上述代码不能很好的兼容，因此需要搭配媒介查询使用，针对不同的DPR设备进行缩放

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border-top::after { 
        /* 省略无关代码 */
        transform: scaleY(.5);
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border-top::after { 
        /* 省略无关代码 */
        transform: scaleY(1 / 3);
    }
}
复制代码