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

webapp 1px显示两倍的问题的更多相关文章

  1. 解决盒子浮动时margin会显示两倍的美观问题

    当给几个大小一样有boder的盒子浮动时,会出现margin自动加起来的结果. 此时可以给每个盒子一个margin-left:-border的长来实现很好的效果,这样右边的盒子会把左边盒子的右边bor ...

  2. Canvas坐标轴中的Y轴距离是X轴的两倍

    如题,相信很多人在初次玩canvas的时候会出现这样的情况,跟着教程走的情况下,诶 怎么画出来的东西,不怎么对劲啊,,,ԾㅂԾ,,!!!!!先上代码 <!DOCTYPE html> < ...

  3. OpenCV show two cameras 同时显示两个摄像头

    用OpenCV同时显示两个摄像头的内容的代码如下: #include <iostream> #include <stdio.h> #include <tchar.h> ...

  4. Eclipse快捷键:同时显示两个一模一样的代码窗口

    如图: 同样的一个HTML文件,在代码编辑窗口,显示两个.   快捷键: Ctrl + Shift + -(减号)   既可以展示两个,也可以只显示一个 附加一个快捷键: Ctrl + Shift + ...

  5. 2807:两倍-poj

    2807:两倍 总时间限制:  1000ms 内存限制:  65536kB 描述 给定2到15个不同的正整数,你的任务是计算这些数里面有多少个数对满足:数对中一个数是另一个数的两倍. 比如给定1 4 ...

  6. [LeetCode] Largest Number At Least Twice of Others 至少是其他数字两倍的最大数

    In a given integer array nums, there is always exactly one largest element. Find whether the largest ...

  7. [Swift]LeetCode747. 至少是其他数字两倍的最大数 | Largest Number At Least Twice of Others

    In a given integer array nums, there is always exactly one largest element. Find whether the largest ...

  8. angular ajax请求 结果显示显示两次的问题

    angular 项目中,由于用到ajax 请求,结果显示如下情况 同样的接口,显示两次,其中第一次请求情况为 request method 显示为opttions 第二次的情况是 为啥会出现如此的情况 ...

  9. M.2接口NVMe协议的固态硬盘读写速度是SATA接口的两倍

    原文:https://www.sohu.com/a/203688929_615464 中午走路的时候,同事说的,M 2 nvme接口的更快. 树莓派开发板可以跑linux . ------------ ...

随机推荐

  1. 4-3 管理及IO重定向

    1. 系统设定默认输出设备:标准输出(STDOUT,1) 系统设定默认输入设备:标准输入(STDIN,0) 系统设定默认错误设备:标准错误(STDERR,2) 2. 标准输入:键盘 标准输出和错误输出 ...

  2. 用于主题检测的临时日志(431b1c14-8b75-4f42-994f-cfda72208c10 - 3bfe001a-32de-4114-a6b4-4005b770f6d7)

    这是一个未删除的临时日志.请手动删除它.(3bf68152-fcac-4628-92d6-3f8f4d5e0ee4 - 3bfe001a-32de-4114-a6b4-4005b770f6d7)

  3. js001-JavaScript简介

    js001-JavaScript简介 1.             JavaScript实现 JavaScript 的三个重要组成部分如下图   1.1.ECMAScript 1.1.1    版本 ...

  4. genymotion是一款完全超越BlueStacks

    今天给大家推荐一款超赞的神器:genymotion. 一:什么是genymotion      genymotion是一款完全超越BlueStacks的安卓模拟器,正如它中文官网的介绍:快到极致的An ...

  5. Openstack-Mitaka Ceilometer 部署心得

    Openstack-Mitaka Ceilometer 部署心得 标签 : Openstack Ceilometer 是 Openstack 的监控管理计费模块,我所用的版本为 Mitaka 版本.C ...

  6. storm学习-storm入门

    超好资料: 英文:https://github.com/xetorthio/getting-started-with-storm/blob/master/ch03Topologies.asc 中文:h ...

  7. klayge 4.2.0 编译vc9

    CMake Error at CMakeLists.txt:442 (ADD_PRECOMPILED_HEADER): Unknown CMake command "ADD_PRECOMPI ...

  8. SQL Server 2008设置 开启远程连接

    SQL Server 2008默认是不允许远程连接的,sa帐户默认禁用的, 如果想要在本地用SSMS连接远程服务器上的SQL Server 2008,需要做两个部分的配置: 1,SQL Server ...

  9. &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;&gt;的含义

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/x ...

  10. 6、iOS快速枚举

    今天在写程序的时候想在当前视图跳转的时候释放掉当前视图上面add的一些子视图.因为add的子视图有些是在别的类里面add进来的,当前页面不知道自己当前有哪几个类型的子视图.这样,我就想到了用循环遍历来 ...