#CSS理论

======================================================

1. 二倍图

• 设计参考：现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿

• 二倍图尺寸：750px

• 应用场景：为了在高分辨率屏幕上显示清晰的图像和界面

======================================================

2. 屏幕分辨率

• 概念：纵横向上的像素点数，单位是px

• PC分辨率：

  • 1920 * 1080
  • 1366 * 768
  • ...

• 缩放比例：

  • 缩放150%时：
    • 1920 / 150%
    • 1080 / 150%

• 分辨率类型：

  • 物理分辨率：硬件分辨率，出厂设置
  • 逻辑分辨率：缩放调节的分辨率，软件/驱动设置

======================================================

3. 视口

• 概念：显示HTML网页的区域，用来约束HTML尺寸

• 视口标签：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

• 属性说明：

  • width=device-width：视口宽度 = 设备宽度
  • initial-scale=1.0：缩放1倍（不缩放）

• 作用：确保网页在不同设备上有正确的显示尺寸

======================================================

4. 适配原理

• 核心问题：不同设备的屏幕尺寸和分辨率差异

• 解决方案：

  1. 使用相对单位（如rem、vw/vh）
  2. 结合媒体查询进行响应式设计
  3. 利用视口标签控制显示区域

• 设计流程：

  1. 以750px二倍图为设计基础
  2. 转换为实际开发尺寸（375px）
  3. 使用适配方案实现多设备兼容

======================================================