公司最近换新首页,按照设计师的要求《大家都在逛》的分割线要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 Web 自动化 - 项目持续集成

    Selenium Web 自动化 - 项目持续集成 2017-02-13 目录 1环境准备  1.1 安装git  1.2 安装jenkins  1.3 安装jenkins插件  1.4 jekins ...

  2. 《新手养成记》--第一篇 iOS手机号正则判断和获取验证码

    今天是开通一个新博客开启新的一年,同时也是对自己的过去做一个告别.介绍一下博主自己,资深iOS屌丝男,今天写这个博客就是刻意拉低逼格的,前两年写的博客为了装那什么,故意写的高大上,其实呵呵哒...年假 ...

  3. CSS3形变——transform与transform-origin画时钟

    css3属性transform和transform-origin"画"时钟 效果图 前言 八哥:哈喽,大家好!好攻城狮就是我就是你们的小八,欢迎收听你的月亮...哦不,是很高兴与你 ...

  4. selenium7种元素识别

    我们以百度主页搜索框为例:= <input autocomplete="off" maxlength="255" value="" c ...

  5. 通过git提交代码到仓库

    昨天有一个妹子问我如何在还没有commit之前push本地的代码到仓库,现在写写,希望能够帮到大家. 当我们pull的时候会出现没有代码commit的错误提示,在这种情况下,我们需要再commit之前 ...

  6. (1)写给Web初学者的教案-----学习Web的知识架构

    1:学习Web的知识架构 前文中我们简单的介绍了一些关于Web的基本知识,这里任老师再次强调一下凡是用浏览器打开的网站我们就称之为Web应用程序(B/S结构).除此之外其它需要下载安装的软件或是手机  ...

  7. 用tp框架来对数据库进行增删改

    先来看添加 使用tp框架,对数据库进行添加操作,都有哪些方法 先在Main控制器中,做个方法 运行一下,注意地址,就要输tianjia了 然后再看一下数据库,有没有添加上数据 添加成功 再来看一下这个 ...

  8. scanf函数之扫描集

    前言 %[]是scanf函数不常用到的格式字符--扫描集(scanset),它的用法很简单,但却能巧妙地解决一些输入问题.(由于书籍里和网上对此格式字符的介绍很少且篇幅较小,本文可能会有些许错误,请读 ...

  9. babel入门基础

    背景 babel的官网说babel是下一代的js语法编译器,现在自己也在很多项目中使用了babel,可是自己对babel的认识呢,只停留在从google和别人项目中copy的配置代码上,内心感到很不安 ...

  10. WPF: 本地化(Localization) 实现

    本文将讨论一种较为方便的本地化方法. 由于在项目中要实现本地化,所以在网上查找相关的解决方案.通过一系列调研,发现实现本地化的方法主要有以下三种: 通过编译项目以设置 x:Uid 并使用 LocBam ...