#CSS

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

1. rem单位

• 概念：相对于根元素（html）的字体大小的单位

• 性质：rem单位是相对单位

• 计算公式：1rem = html元素的font-size值

• 适配原理：通过修改html元素的font-size值，实现整个页面元素的等比例缩放

• 使用方法：

  1. 给HTML标签加字号
  2. 使用rem单位书写尺寸
  3. 通过媒体查询或JavaScript动态调整html的font-size

• rem布局方案：

  • 将网页等分成10份
  • HTML标签的字号为视口宽度的1/10
  • 示例：
    • 视口宽度320px，字号为32px
    • 视口宽度375px，字号为37.5px
    • 视口宽度414px，字号为41.4px

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

2. vw/vh单位

• 概念：视口宽度（vw）和视口高度（vh）的单位

• 定义：

  • 1vw = 视口宽度的1%
  • 1vh = 视口高度的1%

• 优势：直接基于视口尺寸，无需额外计算

• 使用场景：

  • 实现全屏布局
  • 响应式字体大小
  • 自适应元素尺寸

• 示例代码：

  /* 使用vw单位 */
  .container {
    width: 100vw;
    height: 100vh;
  }
  .box {
    width: 50vw; /* 视口宽度的50% */
    height: 25vh; /* 视口高度的25% */
    font-size: 5vw; /* 字体大小为视口宽度的5% */
  }

• vw布局步骤：

  1. 确定设计稿对应的vw尺寸（1/100视口宽度）：
  • 查看设计稿宽度
  • 确定参考设备宽度(视口宽度)
  • 确定vw尺寸（1/100视口宽度）
  2. 计算vw单位尺寸：
  • vw单位的尺寸 = px单位数值 / (1/100视口宽度)

• 应用示例：

  /* 假设设计稿宽度为750px，参考设备宽度为375px */
  /* 1vw = 3.75px (375px / 100) */
  /* 计算29px对应的vw值：29 / 3.75 ≈ 7.73vw */
  .element {
    width: 7.73vw;
    margin-left: 2.4vw;
    padding: 1.33vw;
  }

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