一、css长度值
vm 和vh的区别
“视区”(视窗)所指为浏览器内部的可视区域大小 ,即window.innerWidth/window.innerHeight大小
,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。
二、像素问题
物理像素(physical pixel)
一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素
都有自己的颜色值和亮度值。
设备独立像素(density-independent pixel)
(也叫密度无关像素或逻辑像素),可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序
使用并控制的虚拟像素(比如:CSS 像素,只是在android机中CSS 像素就不叫”CSS 像素”了而是叫
”设备独立像素”),然后由相关系统转换为物理像素。
设备像素比(device pixel ratio )
设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系,它的值可以按如下的公式的得到:
设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上,x方向或者y方向
你可以通过JavaScript 中的window.devicePixelRatio
来获取设备中的像素比值。
设备像素也就是物理像素是保持不变的,逻辑像素是可以伸缩的
视觉稿
根据dpr和设备尺寸来得到视觉稿的尺寸
例如iphone6的尺寸为375×667,对于retina(高分辨率)屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:原先的375×667,就会变成750×1334)。
在普通屏幕下,1个css像素 对应 1个物理像素(1:1)。 在retina 屏幕下,1个css像素对应 4个物理
像素(1:4)。
三、viewport
通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,
再具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域。
对于viewport,国外的PPK大神有很深的见解,他把viewport分成了三种:
layout viewport visual viewport ideal viewport
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
四、一像素边框的问题
设计师要的1px指的是物理像素,而我们写的是逻辑像素
css像素=物理像素/dpr=1/2=0.5px
对于css而言,可以认为是border: 0.5px;,
这是retina下(dpr=2)下能显示的最小单位。
解决一像素边框的问题
伪类 + transform
原理解释:原理是把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,设置其高为一个像素,然后设置上边框也为一个像素,最后通过 CSS3 的 transform 属性把伪元素缩放为原来的一半大小。原先的元素相对定位,新做的 border 绝对定位
.hairlines li{
position: relative;
border:none;
}
.hairlines li:after{
content: '';
position: absolute;
left: 0;
background: #000;
width: 100%;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
最好在使用前也判断一下,结合 JS 代码,判断是否 Retina 屏:
if(window.devicePixelRatio && devicePixelRatio >= 2){
document.querySelector('ul').className = 'scale-1px';
}