最经常使用的移动端1像素边框解决方法

为何移动端css里面写了1px, 实际看起来比1px粗. 其实缘由很好理解。由于css中的1px并不等于移动设备的1px，这些因为不一样的手机有不一样的像素密度。在window对象中有一个devicePixelRatio属性，他能够反应css中的像素与设备的像素比。

devicePixelRatio的官方的定义为：设备物理像素和设备独立像素的比例，也就是
    devicePixelRatio = 物理像素 / 独立像素。
复制代码

效果以下图：

很明显图一要比图二更粗，这就是所谓的1px区别，固然在pc端上效果是同样的。

实现方法

• 伪类 + transform

li{position: relative;}
li:after{
  position: absolute;
  bottom:0;
  left:0;
  content: '';
  width:100%;
  height:1px;
  border-top:1px solid black;
  transform: scaleY(0.5);//注意兼容性
}
复制代码

这种方式的原理很简单，就是把原先元素的 border 去掉，而后利用 :before 或者 :after 重作 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新作的 border 绝对定位。我的认为这是比较完美的作法。

• viewport + rem(ios)

同时经过设置对应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">
复制代码

这种兼容方案相对比较完美，适合新的项目，老的项目修改为本过大,详细请参考。

• 使用box-shadow模拟边框

利用css 对阴影处理的方式实现0.5px的效果。

.box-1px {
  box-shadow: inset 0px -1px 1px -1px black;
}
复制代码

这是我自认为比较简便的几种方法，固然也还有其余的实现方式，这个看我的喜欢吧。不喜勿喷，谢谢！

相关文章参考

1.布局解析: http://www.h5cn.com/html5/jishu/201616797_2.html

2.淘宝方案lib-flexible,px换算成rem: http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html?utm_source=tuicool&utm_medium=referral

3.h5 1px问题解决方案:http://www.tuicool.com/articles/ZRv6bun