1. 二倍图
| 项目 | 说明 |
|---|
| 设计参考 | 现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿 |
| 二倍图尺寸 | 750px |
| 应用场景 | 为了在高分辨率屏幕上显示清晰的图像和界面 |
2. 屏幕分辨率
| 项目 | 说明 |
|---|
| 概念 | 纵横向上的像素点数，单位是px |
| PC分辨率 | 1920 * 1080、1366 * 768 ... |
| 缩放比例 | 缩放150%时：1920 / 150%，1080 / 150% |
| 分辨率类型 | 物理分辨率：硬件分辨率，出厂设置；逻辑分辨率：缩放调节的分辨率，软件/驱动设置 |
3. 视口
| 项目 | 说明 |
|---|
| 概念 | 显示HTML网页的区域，用来约束HTML尺寸 |
| 视口标签 | 见下方代码块 |
| 属性说明 | width=device-width：视口宽度 = 设备宽度；initial-scale=1.0：缩放1倍（不缩放） |
| 作用 | 确保网页在不同设备上有正确的显示尺寸 |
视口标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4. 适配原理
| 项目 | 说明 |
|---|
| 核心问题 | 不同设备的屏幕尺寸和分辨率差异 |
| 解决方案 | 1. 使用相对单位（如rem、vw/vh）；2. 结合媒体查询进行响应式设计；3. 利用视口标签控制显示区域 |
| 设计流程 | 1. 以750px二倍图为设计基础；2. 转换为实际开发尺寸（375px）；3. 使用适配方案实现多设备兼容 |
没考虑那么多，就是几个断点+改一下元素大小，没那么多屁话