发表于： 2018-08-10 10:21:45
1 632
1、什么是物理像素、什么是逻辑像素、什么是DPR？
物理像素： 就是我们肉眼难以看到的设备屏幕上的一颗一颗小颗粒组成的。
逻辑像素：通俗的说就是我们的CSS像素
DPR：就是物理像素和逻辑像素的比值 DPR=物理像素 / 逻辑像素
2、为什么同样设置的16px的像素，在pc端看起来很正常，但是在某些移动设备上看起来却很小很小。
因为pc端的dpr大多都是1，也就是移动端物理像素的1px = css 的 1px ，字体显示是正常的
但是现在很多移动端的DPR都不等于1，大多数是2或者3，现在的2k高清屏，都是4，那么现在在pc端16px的font-size，在dpr为2的移动端，那么实际大小看起来就像是缩写了一半。
3、用css3的媒体查询，得到的是设备的物理像素，还是css像素
@media screen and (min-width: 320px) { html {font-size: 14px;}
}这里得到的的是设备的物理像素，那么如果设备的dpr=2，那么css像素就是640px
返回列表
评论