移动端 1px 解决方案(完整版)

她和她的猫XHH
192 阅读8分钟

1px线变粗的原因

在做移动端项目时，常常是根据设计图设置元素节点的大小和样式，但是有时候根据设计图写出来的样式还是不如人意，虽然表面上看起来和设计稿是一样的，可是就是没设计稿那种感觉，而且莫名还有一种山寨的气息，UI审查的时候也常常会觉得分割线或则边框线太粗了，要更细一点，但是一看代码，已经是1px了，为什么看着还是那么粗呢？

要知道问题的原因首先要了解一下几个概念：

(1)物理像素(physical pixel)

一个物理像素是显示器（手机屏幕）上最小的物理显示单元（像素颗粒），在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。 如：iPhone6上就有750*1334个物理像素颗粒。

(2)设备独立像素(density-independent pixel)

设备独立像素（也叫密度无关像素），可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素（比如：css像素），有时我们也说成是逻辑像素。然后由相关系统转换为物理像素。所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。

(3)设备像素比(device pixel ratio )简称dpr

设备像素比（简称dpr）定义了物理像素和设备独立像素的对应关系。它的值可以按如下的公式的得到：

设备像素比(dpr)=物理像素/逻辑像素(px) // 在某一方向上，x方向或者y方向，下图dpr=2

image.png

我们可以发现，在同样的大小下，2dpr的屏幕时普通屏幕像素点的4倍，3dpr的屏幕时普通屏幕像素点的9倍。这就是retina屏幕用了都说好的原因（清晰）。

1px细线问题

在上文我们已经知道，CSS像素为1px宽的直线，对应的物理像素是不同的，可能是2px或者3px,而设计师想要的1px宽的直线,其实就是1物理像素宽。而设计师要的实际1px的边框就是下面这种情况：

image.png

对于CSS而言，可以认为是border: 0.5px;，这是多倍屏下能显示的最小单位。然而，并不是所有手机浏览器都能识别border: 0.5px，有的系统里，0.5px会被当成为0px处理，那么如何1px细线问题呢？

解决方法

1.使用border-image实现

准备一张符合你要求的border-image：

image-20200522193834965

样式设置：

css
.border-bottom-1px {
  border-width: 0 0 1px 0;
  -webkit-border-image: url(linenew.png) 0 0 2 0 stretch;
  border-image: url(linenew.png) 0 0 2 0 stretch;
}

上文是把border设置在边框的底部，所以使用的图片是2px高，上部的1px颜色为透明，下部的1px使用视觉规定的border的颜色。

优点：

  • 可以设置单条、多条表框。

缺点：

  • 更换颜色和样式麻烦，需要更改图片；
  • 某些设备上会模糊。

2.使用background-image实现

background-image 跟border-image的方法一样，你要先准备一张符合你要求的图片。然后将边框模拟在背景上。 样式设置：

// css
.background-image-1px {
  background: url(../img/line.png) repeat-x left bottom;
  -webkit-background-size: 100% 1px;
  background-size: 100% 1px;
}

优缺点与border-image一样；

3.多背景渐变实现

与background-image方案类似，只是将图片替换为css3渐变。设置1px的渐变背景，50%有颜色，50%透明。 样式设置：

// css
.background-gradient-1px {
  background:
    linear-gradient(#000, #000 100%, transparent 100%) left / 1px 100% no-repeat,
    linear-gradient(#000, #000 100%, transparent 100%) right / 1px 100% no-repeat,
    linear-gradient(#000,#000 100%, transparent 100%) top / 100% 1px no-repeat,
    linear-gradient(#000,#000 100%, transparent 100%) bottom / 100% 1px no-repeat
}
/* 或者 */
.background-gradient-1px{
  background:
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) left / 1px 100% no-repeat,
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) right / 1px 100% no-repeat,
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) top / 100% 1px no-repeat,
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) bottom / 100% 1px no-repeat
}

优点：

  • 可以实现单条、多条边框
  • 边框的颜色随意设置

缺点：

  • 代码量不少
  • 圆角没法实现
  • 多背景图片有兼容性问题

4.使用box-shadow模拟边框

利用css 对阴影处理的方式实现0.5px的效果 样式设置：

css
.box-shadow-1px {
  box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

优点：代码少，兼容性好。缺点：边框有阴影，颜色变浅。

上面四种方式效果并不是太好；

5.伪元素+transform

构建1个伪元素, border为1px, 再以transform缩放到50%。

对于老项目，有没有什么办法能兼容1px的尴尬问题了，个人认为伪类+transform是比较完美的方法了。 原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并将 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。 单条border样式设置：

css
.scale-1px{
  position: relative;
  border:none;
}
.scale-1px:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

四条boder样式设置:

// css
.scale-1px{
  position: relative;
  margin-bottom: 20px;
  border:none;
}
.scale-1px:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

最好在使用前也判断一下，结合 JS 代码，判断是否 Retina 屏：

if(window.devicePixelRatio && devicePixelRatio >= 2){
  document.querySelector('ul').className = 'scale-1px';
}

优点：可以满足所有场景，且修改灵活。缺点：对于已使用伪类的元素（例如clearfix）要多层嵌套。

6.viewport + rem 实现

同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。 在devicePixelRatio = 2 时，输出viewport：

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在devicePixelRatio = 3 时，输出viewport：

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

这种兼容方案相对比较完美，适合新的项目，老的项目修改成本过大。

7、 0.5px方案

在IOS8+，苹果系列都已经支持0.5px了，可以借助媒体查询来处理。

/* 这是css方式*/
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
/*ios dpr=2和dpr=3情况下border相差无几，下面代码可以省略*/
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}

IOS7及以下和Android等其他系统里，0.5px将会被显示为0px。那么我们就需要想出办法解决，说实在一点就是找到Hack。

解决方案是通过JavaScript检测浏览器能否处理0.5px的边框，如果可以，给html标签元素添加个class。

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  var testElem = document.createElement('div');
  testElem.style.border = '.5px solid transparent';
  document.body.appendChild(testElem);
}
if (testElem.offsetHeight == 1) {
  document.querySelector('html').classList.add('hairlines');
}
  document.body.removeChild(testElem);
}
// 脚本应该放在body内，如果在里面运行，需要包装 $(document).ready(function() {})

然后，极细的边框样式就容易了：

div {
  border: 1px solid #bbb;
}
.hairlines div {
  border-width: 0.5px;  
}

优点：简单，不需要过多代码。
缺点：无法兼容安卓设备、 iOS 7及以下设备。

8 postcss-write-svg

使用border-image每次都要去调整图片，总是需要成本的。基于上述的原因，我们可以借助于PostCSS的插件postcss-write-svg来帮助我们。如果你的项目中已经有使用PostCSS，那么只需要在项目中安装这个插件。然后在你的代码中使用：

@svg 1px-border {
    height: 2px;
    @rect {
      fill: var(--color, black);
      width: 100%;
      height: 50%;
    }
}
.example {
    border: 1px solid transparent;
    border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
 }

这样PostCSS会自动帮你把CSS编译出来：

.example {
    border: 1px solid transparent;
    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E")
          2 2 stretch;
  }

个方案简单易用，是我所需要的。目前测试下来，基本能达到我所需要的需求，在最新的适配方案中，我也采用了这个插件来处理1px边框的问题。

总结

  • 0.5px，相信浏览器肯定是会慢慢支持的，目前而言，如果能用的话，可以hack一下。
  • 对于老项目，建议采用transform+伪类。
  • 新项目可以设置viewport的scale值，这个方法兼容性好。
  • postcss-write-svg简单易用，仅适合直线，圆角建议用transform+伪类实现。

参考：juejin.cn/post/707406…

blog.csdn.net/qq_45846359…

avatar
文章
阅读
粉丝