移动端之1px实现

痛定思痛。 2022-01-12 15:13 283阅读 0赞

## 说明 ##

当我们在css里写 border: 1px solid \#000的时候，用户会觉得边线依然很粗不美观。如何实现比1px更细的边线呢？下面列举了几种方案。

## 问题根源 ##

不同设备的物理像素不一样。 设计师一般是按照750px宽度设计页面的，而移动端做自适应时，一般会设置width = device-width，假如设备物理像素为375px，那么布局宽度应该为375px，按比例，此时设计师的1px在页面上应该显示为0.5px。

## 代码演示 ##

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>1px</title>
      <meta name="viewport" content="width=device-width">
    </head>
    <body>
      <div class="item item-1px">列表1</div>
      <div class="item item-0_5px">列表2</div>
      <div class="item item-css3transform">列表3</div>
      <div class="item item-background">列表5</div>
      <div class="item item-4-border">列表6</div>
    
    
      <style> .item { padding: 10px 0 } /*直接写1px，在不同屏幕上效果不一样，有些比设计图粗，有些比设计图细*/ .item-1px { border-bottom: 1px solid #ccc; } /*直接写小数点，ios有效 android无效*/ .item-0_5px { border-bottom: .5px solid #ccc; } /*用伪类+css3缩放，缺点就是最多只能写两个伪类(before和after)，当有四条边框时，无法实现*/ .item-css3transform::after { content: ''; display: block; height: 1px; transform: scaleY(0.5); background: #ccc; position: relative; top: 10px; } /*使用背景线性渐变*/ .item-background::after { display: block; content: ''; height: 1px; background: linear-gradient(0deg, #ccc 50%, transparent 50%); position: relative; top: 10px; } /*使用背景线性渐变，当边框有border-radius时，效果不好*/ .item-4-border { margin: 10px 0; padding: 10px; background: linear-gradient(to bottom, #ccc .5px, transparent 0), linear-gradient(to left, #ccc .5px, transparent 0), linear-gradient(to right, #ccc .5px, transparent 0), linear-gradient(to top, #ccc .5px, transparent 0); } </style>
    </body>
    </html>

## 方案总结 ##

方案1， viewport缩放  
前面讲过viewport适配的方案，适配的原理是整个页面放大缩小，当然也包括边线

方案2， 设置0.5px  
ios有效，部分安卓机型无效。 慢慢等吧，总有一天（可能一两年后）安卓会生效

方案3，使用CSS3 transform，给伪元素缩小尺寸  
都有效，缺点是一条边框还好，如果是4条边框两个伪元素不够得新增标签

方案4，使用背景线性渐变  
方便，兼容性好。

其他方案  
背景图片（麻烦、兼容性不好），svg背景图片（麻烦）