公司最近换新首页，按照设计师的要求《大家都在逛》的分割线要1个像素。
.span-3{
width:33.3333%;
&:not(:first-child){
&:before{
content: " ";
display: block;
width: 1rem/16*1;
height: 100%;
background-color: rgb(224,224,224);//#e0e0e0;
float: left;
}
}
img{
max-width: 1rem/16*106;
}
}
然后效果就出来了
然后请设计师Q图的时候设计师一口咬定说，分割线的尺寸不对，但是看了一下代码确实确实是width:0.0625rem;然后用chrome看了一下
然后设计MM说手机上显示就成了2px，我看看手机上显示效果
好像也是1px也啊，然后设计师MM一口咬定说错了，没办法，美女都说错了难道不行，直接截图用ps量一下就不知道了。
毕竟有图有真相嘛
orz....尼玛真的是2px，到这里我只想说设计MM你的眼睛里有一个尺子吗？这么准？
好吧，既然真的错了，只好找办法改咯。
后来各种尝试，不管是将rem改成什么单位都还是存在这样的问题，
突然想到是不是viewport缩放的方式有问题，
将原因的值减小1半
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
，然后看了一下。果然有效！
虽然这种方式可行但是，我们公司现在的页面都是基于1:1的，如果为了这样的问题那整体改动比较大。
看来只能想想其他方法，我有想过用1px的图片平铺，但是这样的方式是不是太。。。
如果没有解决方法的方法。
突然间，想到一个有意思的做法，先上效果图，ps：有对比了才感觉不是1px，再次佩服设计师mm的眼睛。
做法是：通过阴影来处理，至于为什么阴影的效果不会出现两倍的bug，还请有知道的同学告诉我，谢谢！
box-shadow:0 1px 1px -1px rgb(0,0,0) inset;
偶然发现这1px问题算是一个经典问题：
好吧我们先来看看淘宝怎么处理这个问题的吧
var metaEl = doc.createElement(‘meta‘);
var scale = isRetina ? 0.5:1;
metaEl.setAttribute(‘name‘, ‘viewport‘);
metaEl.setAttribute(‘content‘, ‘initial-scale=‘ + scale + ‘, maximum-scale=‘ + scale + ‘, minimum-scale=‘ + scale + ‘, user-scalable=no‘);
if (docEl.firstElementChild) {
document.documentElement.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement(‘div‘);
wrap.appendChild(metaEl);
documen.write(wrap.innerHTML);
}
是通过动态添加meta的方式，判断是否是retina屏幕来动态添加scale的值。
一般边框或者分割线需要精确的以1px的视觉展示出来，普通的方案无法满足要求。在高清方案下，所有的1px线都能完美重现视觉稿。
div { border: 1px solid #ECECEC; width: 8rem; height: 5rem; border-radius: 0.2rem; }