关于移动端border 1像素在不同分辨率下边显示粗细不一样的处理

最近开发发现一个很有趣的问题就是我如果给一个元素加上一个像素的 border 在不同的分辨率的情况下显示的不同在高清屏幕（尤其是ios 喽不鄙视国产）据说在6plus下会变成3px 这个我就不知道了因为我没有。。。

那么我们换个单位行不行？因为移动端不用px来做啊对不起你换了rem 或者em都不行（我只是测试了这两个单位）

废话不多说了说一下解决方案

看一下我们老大淘宝的解决方案简单粗暴更实用啊

这个图片我觉得够大了对就是用了一个宽度为1px的div来模拟的然后我觉得这样有点浪费div的资源啊于是我继续百度ing。。。

于是有找到了利用定位和after属性来做的例子

<!doctype html>
<html lang="en">
<head>
 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
 <meta charset="UTF-8">
 <title>0.5 border</title>
 <style type="text/css">
 *{margin: 0;padding: 0;-webkit-box-sizing:border-box;}
 ul{
  position: relative;
 }
 li{
  height: 60px;
  line-height: 60px;
  padding-left: 10px;
  position: relative;
  font-size: 20px;
 }
 li:after{
  content: "";
  display: block;
  position: absolute;
  left: -50%;
  width: 200%;
  height: 1px;
  background: #ededed;
  -webkit-transform:scale(0.5);
 }
 </style>
</head>
<body>
 <ul>
  <li>list-item1</li>
  <li>list-item2</li>
  <li>list-item3</li>
  <li>list-item4</li>
  <li>list-item5</li>
  <li>list-item6</li>
  <li>list-item7</li>
  <li>list-item8</li>
 </ul>
</body>
</html>

哎呀这又是一种解决方案。。那么谁的更好一点我就不多说了定位这个东西还是少用一点为好。。。分不清哪一个更好但是知道都可以解决问题至于为什么产生这样的问题建议百度几篇不错的文章来看一下我基本都说代码因为我怕误人子弟。。。如果觉得那里不对欢迎留言。。。。