webapp 1px显示两倍的问题

浏览数：15 / 时间：2015年06月11日

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

，然后看了一下。果然有效！

技术分享

虽然这种方式可行但是，我们公司现在的页面都是基于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设计与实现

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

webapp 1px显示两倍的问题