CSS布局基础(一)--设备独立像素、设备像素

很多文章都讲过这个概念了，我这里就再口语化的讲讲，这为后面设置CSS和页面控制有助于理解，也就是提一提可能很多大神都明白的，说的不好的勿喷

一、三种单位

• px：像素单位
• em：相对单位
• pt：绝对单位
  1）px可以在计算机屏幕、打印机和其它的高分辨率设备上，达到预期的效果
  2）em常用来制作可伸缩的样式表。当给定了一个父元素的字体大小，就可以通过调整一个元素来成比例的改变所有元素大小
  3）pt是能够使用测量设备测得的长度。它们不能够缩放

二、屏幕尺寸

手机屏幕对角线的长度即屏幕尺寸，这里提一句：1英寸（inch）=2.54厘米（cm），尺子一量即可

三、分辨率

一个点、面、线、照片等都是由一个个小方格组成

image.png

各位在手机上看到的1920PX*1080PX说的也就是纵向有1920个小方格，横向有1080个小方格，当width设置1080则占满整个屏幕

四、屏幕像素密度（PPI，即对角线长度为1英寸的正方形内所拥有的像素数，也就是单位面积所含的像素点数量，越多越清晰）

就是屏幕的横向的平方加纵向的平方的和开根号后除以屏幕尺寸

五、设备独立像素 (一个总体概念，包括CSS像素)

这个有点抽象，举个例子说。iPhone 3和iPhone 4屏幕尺寸一样，但后者的像素密度是前者的两倍，使用物理像素作为单位在web中设置尺寸是不合理的。iPhone 3物理像素是320480，iPhone 4的物理像素是640960，但是它们的设备独立像素都是320480，iPhone 4用4个物理像素表示1个设备独立像素（横向2个物理像素表示1个设备独立像素，纵向2个物理像素表示一个设备独立像素*），因此操作系统定义设备独立像素，用设备独立像素定义的尺寸，不管屏幕的参数如何，都能以合适的大小显示。

<!--获取设备独立像素的宽高-->
screen.width
screen.height
<!--获取浏览器可用显示区域的大小，也就是浏览器中间负责显示的部分-->
window.innerWidth
window.innerHeight

六、物理像素/设备像素

出厂前，定好的分辨率

七、设备像素和设备独立像素之间的关系

PC端： 1个设备独立像素 = 1个设备像素 （这是在100%，未缩放的情况下；如果缩放到200%可以说1个设备独立像素 = 2个设备像素），即屏幕变大，设备独立像素里小方格更多，就会是从1：1，慢慢增加到1：n
移动端： 根据设备不同有很大的差异，根据 ppi 不同我们可以得到不同的换算关系，标准屏幕（160ppi）下 1个设备独立像素 = 1个设备像素

八、DPR设备像素比

可以将程序中使用到的CSS像素转换为设备像素，解决同样的图片在不同移动终端上显示存在差异的问题

• 当设备像素比为1:1时，使用1（1×1）个设备像素显示1个CSS像素；
• 当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素；
• 当设备像素比为3:1时，使用9（3×3）个设备像素显示1个CSS像素。
  设备像素/设备独立像素，在JS中可以通过 window.devicePixelRatio 获取

非标准屏幕上以同样大小显示同一张图片时：

需要缩放图片，依照公式处理 QQ图片20200501172941.png

举个例子讲：
在CSS中设置图片大小为100px，要在dpr为2:1（即在一个方向上2个设备像素长度代表1个CSS像素长度）的屏幕上同比例显示，就需要先放大这个图片到2被大小，即200px，这样我们在设备上对于图片的直观感受才是和标准屏幕相同