目标是一套代码能够兼容多个终端
<meta name="viewport" content="width=device-width, initial-scale=1.0">，用设备屏幕宽度作为内容的宽度，这样做的目的是确保在不同大小的屏幕上，网页内容能够自动调整布局，使用户体验更加友好。- 媒体查询（满足特定的条件时候才生效，比如屏幕的尺寸、竖屏横屏等）
- 通过
link标签中判断设备的尺寸，从而引用不同的css样式文件<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
- 通过
@media判断设备的尺寸应用不同的css样式// 屏幕大于 1024px 或小于 1440px 时应用该样式@media screen and (min-width: 1024px) and (max-width: 1440px)
- 通过
- 使用相对长度 em（相对于当前元素的字体大小），rem（相对于根元素（
<html>）的字体大小），vw - 使用流式布局 flex，grid
- 1px css 样式不总是等于 1 像素物理像素，DPR = 设备像素 /css 像素，比如 iphone4 是 2
设备像素比使得 CSS 像素和物理像素之间存在转换关系。这意味着在高 设备像素比（DPR）设备上，同样的 CSS 样式可能会占据更多的物理像素，以确保在高分辨率屏幕上视觉效果清晰。例如：
- 在 DPR 为 2 的设备上，1px 的 CSS 宽度实际上占据 2 个物理像素。
- 在 DPR 为 3 的设备上，1px 的 CSS 宽度实际上占据 3 个物理像素。
这就是为什么在高 DPR 设备上，元素看起来更清晰、更锐利，因为它们使用了更多的物理像素来渲染相同的 CSS 像素。
分辨率 比例 | 设备尺寸
1024 * 500 （8.9 寸）
1024 * 768 （4 : 3 | 10.4 寸、12.1 寸、14.1 寸、15 寸）
1280 * 800 （16 : 10 |15.4 寸）
1280 * 1024 （5：4 | 14.1寸、15.0寸）
1280 * 854 （15 : 10 | 15.2）
1366 * 768 （16：9 | 不常见）
1440 * 900 （16：10 17寸 仅苹果用）
1440 * 1050 （5：4 | 14.1寸、15.0寸）
1600 * 1024 （14：9 | 不常见）
1600 * 1200 （4：3 | 15、16.1）
1680 * 1050 （16：10 | 15.4寸、20.0寸）
1920 * 1200 （23寸）1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14