最近开发发现一个很有趣的问题 就是我如果给一个元素加上一个像素的 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>
哎呀 这又是一种解决方案。。 那么谁的更好一点我就不多说了 定位这个东西还是少用一点为好。。。 分不清哪一个更好但是知道都可以解决问题 至于为什么产生这样的问题 建议百度几篇不错的文章来看一下 我基本都说代码 因为我怕误人子弟。。。 如果觉得那里不对欢迎留言。。。。