公司最近换新首页,按照设计师的要求《大家都在逛》的分割线要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; }

手机淘宝的flexible设计与实现