移动端实现0.5px线条

移动端写页面时候，由于手机屏幕小，为了让线条看起来更细腻，所以需要0.5px的线条

现在的浏览器越来越先进，最新的浏览器大部分都可以使用媒体查询来实现，例如

.border-div {
    border: 1px solid #333;
}

@media (-webkit-min-device-pixel-ratio: 2) {
    .border-div {
        border: 0.5px solid #333;
    }
}

如果要针对整个页面使用.5px边框的话，可以用js来判断是否retina屏来使用特定的class

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  // retina屏
  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);
}

上面代码效果，当在retina屏幕显示的时候会在html标签上添加一个hairlines的class，定义如下

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

如果需要兼容旧版本的浏览器，可以用下面的几种方法

transform

原理很简单，就是利用伪类元素绘制1px的线条，然后利用transform:scale(0.5)缩放一半就变成了0.5px

<style type="text/css">
.line2 {
  position: relative;
  height: 1px;
}
.line2: after {
  position: absolute;
  content: '';
  width: 200 % ;
  height: 1px;
  transform - origin: 0 0;
  transform: scale(0.5);
  background: red;
}
</style>
<div class="line2"></div>

linear-gradien

原理是利用一半背景色，一半边框色来实现的，例如下面代码

<div style="height: 200px; width: 100px; background: linear-gradient(blue 50%, red 50%)"></div>

实现的效果

根据这个原理可以这样实现，第一个为背景色即可

.line1 {
  height: 1px;
  background: linear - gradient(#fff 50 % , red 50 % );
}