关于移动端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>

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

 

posted @ 2015-08-27 09:53  请低下头  阅读(3521)  评论(0)  编辑  收藏  举报