50、Web开发中的CSS像素、文档几何、滚动与组件使用

Web开发中的CSS像素、文档几何、滚动与组件使用

1. CSS像素

在过去，当我们提到“像素”时，往往指的是硬件上的单个“图像元素”，比如分辨率为1024×768的电脑显示器和320×480的触摸屏手机。但如今，4K显示器和“视网膜”显示屏拥有极高的分辨率，软件像素与硬件像素已经脱钩。

一个CSS像素（客户端JavaScript像素也是如此）实际上可能由多个设备像素组成。 Window 对象的 devicePixelRatio 属性指定了每个软件像素所使用的设备像素数量。例如， dpr 为2意味着每个软件像素实际上是一个2×2的硬件像素网格。 devicePixelRatio 的值取决于硬件的物理分辨率、操作系统的设置以及浏览器的缩放级别。

devicePixelRatio 不一定是整数。如果你使用的CSS字体大小为“12px”，而设备像素比为2.5，那么以设备像素为单位的实际字体大小就是30。由于我们在CSS中使用的像素值不再直接对应屏幕上的单个像素，像素坐标也不再需要是整数。如果 devicePixelRatio 是3，那么坐标3.33是完全合理的；如果比例实际上是2，那么坐标3.33将被四舍五入为3.5。

2. 查询元素的几何信息

你可以通过调用元素的 getBoundingClientRect() 方法来确定元素的大小（包括CSS边框和内边距，但不包括外边距）和位置（视口坐标）。该方法不接受任何参数，并返回一个具有