公司最近换新首页,按照设计师的要求《大家都在逛》的分割线要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. 置的测试文件的大小一定要大过你的内存(最佳为内存的两倍大小),不然linux会给你的读写的内容进行缓存,会使数值非常不准确。

    使用iozone测试磁盘性能   IOzone是一个文件系统测试基准工具.可以测试不同的操作系统中文件系统的读写性能.可以通过 write, re-write, read, re-read, rand ...

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

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

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

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

  6. 2807:两倍-poj

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

  7. [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 ...

  8. [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 ...

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

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

随机推荐

  1. selenium 运行之后错误提示Unable to connect to host 127.0.0.1 on port 7055 after 45000 ms. Firefox console output

    错误提示: org.openqa.selenium.firefox.NotConnectedException: Unable to connect to host 127.0.0.1 on port ...

  2. 【Spring】使用Spring和AMQP发送接收消息(上)

    讲AMQP之前,先讲下传统的JMS的消息模型,JMS中主要有三个参与者:消息的生产者.消费者.传递消息的通道(队列或者主题),两种消息模型如下:通道是队列: 通道是队列: 通道是主题: 在JMS中,虽 ...

  3. SVNManager配置

    1.svn与apache的安装 yum install -y subversion httpd   httpd.conf添加如下内容: LoadModule dav_svn_module module ...

  4. SQL 中的常用函数及使用

    在SQL中我们使用的函数有很多,我们经常使用的就是下面的一些函数,那么我一一列举数来: 1:聚合函数:MAX 返回指定数据的最大值. MIN 返回指定数据的最小值. COUNT 返回指定组中项目的数量 ...

  5. 【树莓派】iptables相关配置

    关于iptables的配置,参见官方资料:http://wiki.ubuntu.org.cn/IptablesHowTo 最好. 进入iptables # sudo iptables -L 列出目前的 ...

  6. 内网转发ngrok的使用

    1.下载解压ngrok:https://ngrok.com/download 2.执行ngrok会打开控制台 3.输入命令,开始映射本地的8080端口 ngork http 8080 控制台会返回一个 ...

  7. vue学习笔记 计算属性(四)

    计算属性就是vue实例里的computed属性,对应一个对象,里面可以放各种方法,方法的作用就是可以生成和数据变量对应的计算后的变量,跟数据相关的复杂逻辑变量,都可以使用计算属性实现,computed ...

  8. Jmeter-测试计划元件

    打开Jmeter页面,默认显示测试计划和工作台: 1.测试计划: 用来描述一个性能测试,包含与本次性能测试所有相关的功能.也就说性能测试的所有内容是于基于一个计划的. 右键单击"测试计划&q ...

  9. java实现8种排序算法(详细)

    八种排序分别是:直接插入排序.希尔排序.冒泡排序.快速排序.直接选择排序.堆排序.归并排序.基数排序. 希尔排序在时间性能上优于直接插入排序,但希尔排序是一种不稳定排序. 快速排序的时间性能也优于冒泡 ...

  10. shell是什么,各种shell的初步认识,适用于初学者

    shell是什么?有什么用处?怎么用?我相信,这是大部分人刚接触到shell都有过的疑问.下面小编为大家讲解一下自己的讲解,希望能对大家有所帮助. 什么是shell? shell就是系统内核的一层壳, ...