dpr,ppi,dip,viewport的一些概念

一 ppi,dpr,dip,分辨率,屏幕尺寸,设备物理像素，设备独立像素

分辨率：1920px*1080px 在这个设备上纵向上有 1920个像素点（色块）...

屏幕尺寸：5英寸(in) = 5*2.54(cm) 指的是在这个屏幕上对角线的长度使用英寸单位 这个值是每个设备固定不变的

像素密度ppi: ppi和dpi 指的是一个设备上每英寸长度上有多少个像素点 ppi = 对角线上的像素数量/尺寸

设备像素比dpr: 指的是一个设备上的 物理像素和独立像素的比值 dpr = 设备像素/设备独立像素(css像素)
dpr = 设备像素/CSS像素 = 设备像素 / 设备独立像素 ~= PPI/160 = 页面缩放比例
根据dpr可以判断 一个 css像素代表多少个设备像素点 1:1, 2:1 一个css像素代表4个物理像素
3:1 一个css像素代表9个物理像素

设备像素(物理像素) : 指的就是设备的 分辨率 大小

设备独立像素(逻辑像素) dip: 指的是 css的像素 ideal viewport (dip)设备独立像素 === css像素 === 逻辑像素

二 css单位：px,em,rem,vw,vh:

px: 相对单位 根据dpr 相对设备物理像素的 数量
em: 相对单位 根据父元素的字体大小，相对父元素的字体大小成倍
rem: 相对单位 根据根目录html的字体大小，相对html元素字体大小成倍
vw,vh: 相对单位 根据每个设备的屏幕大小，宽和高，相对屏幕分成100份 100vw,100vh为满屏

三 viewport虚拟视窗

1.layout viewport
　　默认虚拟视窗为980px
　　document.documentElement.clientWidth和-Height可以获取layout viewport的尺寸
2.visual viewport
　　可视的视窗相对于 ideal viewport缩放
　　window.innerWidth/Height来获取visual viewport的尺寸
3.ideal viewport
　　ideal viewport的宽度等于移动设备的屏幕宽度(即设备逻辑像素)，跟设备的物理宽度没有关系
　　ideal viewport的宽度 = 屏幕的逻辑像素宽度

4.缩放因子：
　　相对于ideal viewport来缩放的
　　缩放改变的是 每CSS像素单位代表的物理像素长度，而设备像素保持不变
　　zoom factor = ideal viewport width / visual viewport width

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有