webapp 1px显示两倍的问题

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

 

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