mobile first

[silverWolf818]

移动端适配

1. 像素 和 DPR

物理像素（Device Pixels）

物理像素是显示设备上实际的像素点，也就是屏幕上能控制显示的最小单元。例如，一个1920x1080分辨率的屏幕，就有1920个水平像素和1080个垂直像素，总共约207万个物理像素点。

CSS像素（CSS Pixels）

CSS像素是Web开发中使用的抽象单位，用于在网页上定义元素的大小、布局和其他视觉表现。CSS像素提供了一种与设备无关的方式来处理屏幕上的内容，使得开发者可以在不同分辨率和设备上提供一致的用户体验。

设备像素比（DPR）

DPR是物理像素与CSS像素之间的比率。在早期的屏幕上，这个比率通常是1:1，意味着1个CSS像素对应1个物理像素。然而，随着设备屏幕分辨率的提高，制造商开始增加更多的像素到相同尺寸的屏幕上，这就意味着更高的DPR。例如：

• DPR为1的设备：1个CSS像素对应1个物理像素。
• DPR为2的设备：1个CSS像素对应2x2个物理像素（共4个物理像素）。
• DPR为3的设备：1个CSS像素对应3x3个物理像素（共9个物理像素）。

在Web开发中，可以通过JavaScript访问window.devicePixelRatio属性来获取当前设备的DPR值。DPR 主要影响以下内容：

• 图像清晰度：在高DPR设备上，标准分辨率的图像可能会显示得不够清晰。因此，开发者需要为不同的DPR提供不同分辨率的图像。这通常通过提供2x、3x等图像版本来实现，以便根据设备的DPR加载合适的图像资源。

<img class="gb_m" src="https://lh3.googleusercontent.com/ogw/ANLem4b_wUBRWyZrQTBgYMyIwca9ShtCu8l0J02CwhoG=s32-c-mo" srcset="https://lh3.googleusercontent.com/ogw/ANLem4b_wUBRWyZrQTBgYMyIwca9ShtCu8l0J02CwhoG=s32-c-mo 1x, https://lh3.googleusercontent.com/ogw/ANLem4b_wUBRWyZrQTBgYMyIwca9ShtCu8l0J02CwhoG=s64-c-mo 2x">