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 第二次的情况是 为啥会出现如此的情况 ...
随机推荐
- 读书笔记 effective c++ Item 29 为异常安全的代码而努力
异常安全在某种意义上来说就像怀孕...但是稍微想一想.在没有求婚之前我们不能真正的讨论生殖问题. 假设我们有一个表示GUI菜单的类,这个GUI菜单有背景图片.这个类将被使用在多线程环境中,所以需要mu ...
- 代写编程的作业、笔试题、课程设计,包括但不限于C/C++/Python
代写编程作业/笔试题/课程设计,包括但不限于C/C++/Python 先写代码再给钱,不要任何定金!价钱公道,具体见图,诚信第一! (截止2016-11-22已接12单,顺利完成!后文有成功交付的聊天 ...
- MDX 用Ancestors得到Hierarchy中指定Level的值(附带SCOPE用法之一)
需求:用户想要用Excel,对比每月预算和整年预算,需要在两个用户定义的Hierarchy都可以浏览.财年季月日(FYQMD)和财年月日(FYMD). 自定义hierarchy 属性关系(Attrib ...
- C#中static void Main(string[] args) 参数详解
学习C#编程最常见的示例程序是在控制台应用程序中输出Hello World! using System; namespace DemoMainArgs { class Program { static ...
- (读书笔记)第2章 TCP-IP的工作方式
第2章 TCP-IP的工作方式 TCP/IP协议系统 为了实现TCP的功能,TCP/IP的创建者使用了模块化的设计.TCP/IP协议系统被分为不同的组件,每个组件分别负责通信过程的一个步骤.这种模块化 ...
- 2017-03-10 T-sql 语句 高级查询
T-SQL语句: 创建数据库: 1,点击新建查询,在弹出的页面上进行代码编写.点击可用数据库,编写前确定当前操作的页面是自己想要进行操作的界面. 2,数据库创建语句 Create datebase ...
- Ionic2开发笔记(2)创建子页面及其应用
1. 当你第一次产生ionic2应用程序,这是生成的项目结构 ├── ├── config.xml 这包含配置应用程序的名称,和包名,将被用于我们的应用程序安装到一个实际的设备. ├── h ...
- ionic 添加新module
angular.module 引入新的module: 1. 在index.html中需要引入必须的js文件2. app.js: angular.module('starter', ['ionic',' ...
- Memcached十问十答
1.Memcached是什么,有什么作用? Memcached是一种纯内存的,key-value,CS架构的数据库服务软件,主要用于数据库,web服务器的缓存,以减小数据库,web服务器的访问压力,尤 ...
- MYSQL数据库-SELECT详解
将SQL文件导入数据库中 $ source /url/file_name.sql ======================================================= S ...