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 运行之后错误提示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 ...
- 【Spring】使用Spring和AMQP发送接收消息(上)
讲AMQP之前,先讲下传统的JMS的消息模型,JMS中主要有三个参与者:消息的生产者.消费者.传递消息的通道(队列或者主题),两种消息模型如下:通道是队列: 通道是队列: 通道是主题: 在JMS中,虽 ...
- SVNManager配置
1.svn与apache的安装 yum install -y subversion httpd httpd.conf添加如下内容: LoadModule dav_svn_module module ...
- SQL 中的常用函数及使用
在SQL中我们使用的函数有很多,我们经常使用的就是下面的一些函数,那么我一一列举数来: 1:聚合函数:MAX 返回指定数据的最大值. MIN 返回指定数据的最小值. COUNT 返回指定组中项目的数量 ...
- 【树莓派】iptables相关配置
关于iptables的配置,参见官方资料:http://wiki.ubuntu.org.cn/IptablesHowTo 最好. 进入iptables # sudo iptables -L 列出目前的 ...
- 内网转发ngrok的使用
1.下载解压ngrok:https://ngrok.com/download 2.执行ngrok会打开控制台 3.输入命令,开始映射本地的8080端口 ngork http 8080 控制台会返回一个 ...
- vue学习笔记 计算属性(四)
计算属性就是vue实例里的computed属性,对应一个对象,里面可以放各种方法,方法的作用就是可以生成和数据变量对应的计算后的变量,跟数据相关的复杂逻辑变量,都可以使用计算属性实现,computed ...
- Jmeter-测试计划元件
打开Jmeter页面,默认显示测试计划和工作台: 1.测试计划: 用来描述一个性能测试,包含与本次性能测试所有相关的功能.也就说性能测试的所有内容是于基于一个计划的. 右键单击"测试计划&q ...
- java实现8种排序算法(详细)
八种排序分别是:直接插入排序.希尔排序.冒泡排序.快速排序.直接选择排序.堆排序.归并排序.基数排序. 希尔排序在时间性能上优于直接插入排序,但希尔排序是一种不稳定排序. 快速排序的时间性能也优于冒泡 ...
- shell是什么,各种shell的初步认识,适用于初学者
shell是什么?有什么用处?怎么用?我相信,这是大部分人刚接触到shell都有过的疑问.下面小编为大家讲解一下自己的讲解,希望能对大家有所帮助. 什么是shell? shell就是系统内核的一层壳, ...