手机(屏幕)尺寸:指对角线的长度,用英寸表示
css像素:逻辑像素,也就是我们写代码时候的px,注意缩放会改变css像素大小
设备像素pt:又叫物理像素,不同的设备的物理像素大小也是不同的。
pt:指的是72分之一英寸。
ppi:像素密度,即每英寸(in)像素个数，常用于ui设计
ppi=屏幕分辨率的各方向的平方的和/屏幕尺寸。
以iphone6为例子,屏幕是1334*750,326ppi,屏幕4.7英寸
Math.sqrt(Math.pow(1334,2)+Math.pow(750,2)) / 4.7 ≈ 325
dpi:每英寸(in)像素点数,常用于平面印刷
dpr像素比:
像素比=物理像素/css像素
通过:var dpr=window.devicePixelRatio获取
在pc端:
dpr通常为1,即只需指定css为1,物理像素就为1px,因为屏幕足够大,一个css像素用一个物理像素来显示,完全可以
在移动端:
若dpr=2,意味着需要用2个物理像素填充一个css像素(面积上需要4个),因此一个css像素=dpr个物理像素。
移动设备大小是有限的,而且分辨率不低,甚至比pc端更高,也就是可以显示的物理像素更多,如果和pc端一样，一个css的px和物理像素一一对应,可以想象,显示的内容有多小
在高清屏中:
屏幕拥有的物理像素点数比非高清屏多4倍甚至更多,如果继续按照dpr=1,那么同一张图片在高清屏上面显示的区域面积会是非高清屏的1/4
故推出dpr=4等等,使用4个乃至更多物理像素来渲染1个逻辑像素,这样一来,,同样的CSS代码设置的尺寸相同
1px边框问题:
故在之上的条件下,1px可能屏幕硬是塞给你一条宽度为2—3个物理像素的线
单位
em:一个字符长度
in:英尺
分辨率:狭义的理解为屏幕的像素,例如1200*780,可以理解为水平方向有1200的像素点,垂直方向有780个像素点。分辨率高的显示屏可以显示更多细节，反之则粗糙。
设备独立像素(保证图像在不同设备上占比相同)
ios:pt
android:dp
独立像素和像素关系:
window.devicePixelRatio
获取物理设备的逻辑像素css
window.screen.width; 只可读取,不可改变
视口(viewport)
pc端:视口大小就是整个浏览器大小(包括浏览器的上栏目等)
document.doucumentElement.clientHeight
