首先我们要搞清楚、设备像素(物理像素)、抽象像素(css像素)、像素比(DPR)、PPI
设备像素是物理概念,指的是设备屏幕上的像素点个数
CSS 中的像素是一个相对值,不是绝对值,CSS 中的像素单位是抽象的,只是一种规范,最终的显示是取决于物理设备的。
DPR=物理像素/css像素(屏幕的宽度)
因为人的眼睛超过一定分辨率后,分辨率提高,肉眼很难看出差别,所以一般都是以iPhone6为标准做ui设计:设备像素(物理像素)是750px,css像素(视口的宽度)是375px
以iphone6为例(撑满屏幕):
比如一个固定高度div,要撑满屏幕 ,为了达到预期效果,设计搞会按物理像素出设计搞750px,但屏幕视口宽度(通过document.documentElement.clientWidth获取)只有375px,我们通常会设置为:width:
375px,这样我们就把值固定了,达不到自动适应的效果
根据css3的rem原理,px单位转成rem单位,是根据根元素字体大小
为了计算方便,我们希望(设计稿750px)样式设置为:width: 7.5rem ,即