响应式设计
解释
目标是一套代码适配多个终端
设置
<meta name="viewport" content="width=device-width, initial-scale=1.0">，用设备屏幕宽度作为内容的宽度，这样做的目的是确保在不同大小的屏幕上，网页内容能够自动调整布局，使用户体验更加友好。
媒体查询
- 通过在
link标签中判断设备尺寸，从而引用不同css样式文件
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width:1024px) and (max-width:1440px)
- 通过
@media判断设备的尺寸应用不同的css样式
//屏幕大于1024px或小于1440px时应用该样式
@media screen and (min-width:1024px) and (max-width:1440px)使用相对长度
em (相对于当前元素的字体大小)，rem （相对于根元素(<html>)的字体大小，vw
使用流式布局
flex，grid
tips
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寸）