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; }
webapp 1px显示两倍的问题的更多相关文章
- 解决盒子浮动时margin会显示两倍的美观问题
当给几个大小一样有boder的盒子浮动时,会出现margin自动加起来的结果. 此时可以给每个盒子一个margin-left:-border的长来实现很好的效果,这样右边的盒子会把左边盒子的右边bor ...
- Canvas坐标轴中的Y轴距离是X轴的两倍
如题,相信很多人在初次玩canvas的时候会出现这样的情况,跟着教程走的情况下,诶 怎么画出来的东西,不怎么对劲啊,,,ԾㅂԾ,,!!!!!先上代码 <!DOCTYPE html> < ...
- 置的测试文件的大小一定要大过你的内存(最佳为内存的两倍大小),不然linux会给你的读写的内容进行缓存,会使数值非常不准确。
使用iozone测试磁盘性能 IOzone是一个文件系统测试基准工具.可以测试不同的操作系统中文件系统的读写性能.可以通过 write, re-write, read, re-read, rand ...
- OpenCV show two cameras 同时显示两个摄像头
用OpenCV同时显示两个摄像头的内容的代码如下: #include <iostream> #include <stdio.h> #include <tchar.h> ...
- Eclipse快捷键:同时显示两个一模一样的代码窗口
如图: 同样的一个HTML文件,在代码编辑窗口,显示两个. 快捷键: Ctrl + Shift + -(减号) 既可以展示两个,也可以只显示一个 附加一个快捷键: Ctrl + Shift + ...
- 2807:两倍-poj
2807:两倍 总时间限制: 1000ms 内存限制: 65536kB 描述 给定2到15个不同的正整数,你的任务是计算这些数里面有多少个数对满足:数对中一个数是另一个数的两倍. 比如给定1 4 ...
- [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 ...
- [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 ...
- angular ajax请求 结果显示显示两次的问题
angular 项目中,由于用到ajax 请求,结果显示如下情况 同样的接口,显示两次,其中第一次请求情况为 request method 显示为opttions 第二次的情况是 为啥会出现如此的情况 ...
随机推荐
- Selenium Web 自动化 - 项目持续集成
Selenium Web 自动化 - 项目持续集成 2017-02-13 目录 1环境准备 1.1 安装git 1.2 安装jenkins 1.3 安装jenkins插件 1.4 jekins ...
- 《新手养成记》--第一篇 iOS手机号正则判断和获取验证码
今天是开通一个新博客开启新的一年,同时也是对自己的过去做一个告别.介绍一下博主自己,资深iOS屌丝男,今天写这个博客就是刻意拉低逼格的,前两年写的博客为了装那什么,故意写的高大上,其实呵呵哒...年假 ...
- CSS3形变——transform与transform-origin画时钟
css3属性transform和transform-origin"画"时钟 效果图 前言 八哥:哈喽,大家好!好攻城狮就是我就是你们的小八,欢迎收听你的月亮...哦不,是很高兴与你 ...
- selenium7种元素识别
我们以百度主页搜索框为例:= <input autocomplete="off" maxlength="255" value="" c ...
- 通过git提交代码到仓库
昨天有一个妹子问我如何在还没有commit之前push本地的代码到仓库,现在写写,希望能够帮到大家. 当我们pull的时候会出现没有代码commit的错误提示,在这种情况下,我们需要再commit之前 ...
- (1)写给Web初学者的教案-----学习Web的知识架构
1:学习Web的知识架构 前文中我们简单的介绍了一些关于Web的基本知识,这里任老师再次强调一下凡是用浏览器打开的网站我们就称之为Web应用程序(B/S结构).除此之外其它需要下载安装的软件或是手机 ...
- 用tp框架来对数据库进行增删改
先来看添加 使用tp框架,对数据库进行添加操作,都有哪些方法 先在Main控制器中,做个方法 运行一下,注意地址,就要输tianjia了 然后再看一下数据库,有没有添加上数据 添加成功 再来看一下这个 ...
- scanf函数之扫描集
前言 %[]是scanf函数不常用到的格式字符--扫描集(scanset),它的用法很简单,但却能巧妙地解决一些输入问题.(由于书籍里和网上对此格式字符的介绍很少且篇幅较小,本文可能会有些许错误,请读 ...
- babel入门基础
背景 babel的官网说babel是下一代的js语法编译器,现在自己也在很多项目中使用了babel,可是自己对babel的认识呢,只停留在从google和别人项目中copy的配置代码上,内心感到很不安 ...
- WPF: 本地化(Localization) 实现
本文将讨论一种较为方便的本地化方法. 由于在项目中要实现本地化,所以在网上查找相关的解决方案.通过一系列调研,发现实现本地化的方法主要有以下三种: 通过编译项目以设置 x:Uid 并使用 LocBam ...