布局与响应式设计-第13章-13.1-视口设置与相对单位

一、学习目标

• 理解视口（Viewport）的概念及作用
• 掌握viewport元标签的配置方法
• 熟练使用rem/vw/vh等相对单位
• 能够结合相对单位实现响应式字体与布局

二、概念讲解

2.1 视口的定义与分类

视口（Viewport） 是指浏览器显示网页内容的区域。在响应式设计中，视口分为三类：

• 布局视口（Layout Viewport）：浏览器默认的虚拟视口，宽度通常为980px（早期为适配桌面网站），移动端内容会被缩小显示。
• 视觉视口（Visual Viewport）：用户实际看到的区域，可通过缩放改变，但不会影响布局视口宽度。
• 理想视口（Ideal Viewport）：设备的最佳显示视口，宽度等于设备屏幕宽度，无需缩放即可正常浏览。

示例：iPhone SE的理想视口宽度为320px，iPhone 13为390px，iPad为768px（竖屏）。

2.2 视口设置的重要性

未设置视口时，移动端浏览器会将布局视口宽度设为980px，导致网页内容被缩小，用户需手动放大查看，体验极差。通过viewport元标签可将布局视口宽度设置为理想视口宽度，实现网页自适应设备屏幕。

三、语法参考

3.1 viewport元标签

基本语法（必须放在“标签内）：

核心属性：

推荐配置（兼顾兼容性与可访问性）：

3.2 相对单位

3.2.1 rem（根元素字体大小单位）

• 定义：相对于根元素（`）的字体大小（font-size`）
• 优势：通过修改根元素字体大小，可统一调整页面所有使用rem的元素尺寸
• 换算关系：若html { font-size: 16px; }，则1rem = 16px，0.5rem = 8px

示例：

html {
  font-size: 16px; /* 根元素字体大小，默认通常为16px */
}
h1 {
  font-size: 2rem; /* 32px */
}
p {
  font-size: 1rem; /* 16px */
}

3.2.2 vw/vh（视口百分比单位）

• vw：视口宽度的1%（1vw = 视口宽度 ÷ 100）
• vh：视口高度的1%（1vh = 视口高度 ÷ 100）
• vmin：vw和vh中的较小值
• vmax：vw和vh中的较大值

示例：在375px宽的设备上，1vw = 3.75px，50vw = 187.5px（视口宽度的50%）。

.box {
  width: 50vw; /* 宽度为视口宽度的50% */
  height: 30vh; /* 高度为视口高度的30% */
  font-size: 5vmin; /* 字体大小为视口宽高中较小值的5% */
}

3.2.3 单位对比与适用场景

四、实战示例

4.1 基础示例：响应式字体

需求：实现字体大小随设备宽度变化，在320px设备上为14px，在768px设备上为16px，在1200px设备上为18px。

实现步骤：

1. 设置viewport元标签：

1. 使用rem单位定义字体，并通过媒体查询动态调整根元素字体大小：

/* 基础样式（默认适配320px设备） */
html {
  font-size: 14px; /* 1rem = 14px */
}
body {
  font-size: 1rem; /* 14px */
}

/* 平板设备（768px+） */
@media (min-width: 768px) {
  html {
    font-size: 16px; /* 1rem = 16px */
  }
}

/* 桌面设备（1200px+） */
@media (min-width: 1200px) {
  html {
    font-size: 18px; /* 1rem = 18px */
  }
}

4.2 进阶示例：vw实现自适应布局

需求：实现一个占满屏幕宽度50%、高度为屏幕高度20%的蓝色盒子，字体大小为屏幕宽度的4%。

代码实现：

<title>vw单位实战</title>

<style>
    .box {
      width: 50vw; /* 宽度为视口宽度的50% */
      height: 20vh; /* 高度为视口高度的20% */
      background: #4CAF50;
      color: white;
      font-size: 4vw; /* 字体大小为视口宽度的4% */
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>

  <div class="box">自适应盒子</div>

效果：在320px设备上，盒子宽160px、高64px（假设屏幕高度320px）、字体12.8px；在768px设备上，盒子宽384px、高153.6px（假设屏幕高度768px）、字体30.72px。

五、注意事项

5.1 viewport元标签的常见错误

• 遗漏width=device-width：导致布局视口宽度不为设备宽度，响应式失效。
• 过度限制缩放：user-scalable=no会导致用户无法放大内容，影响可访问性（如视力障碍用户），建议仅在特殊场景使用（如游戏、绘图应用）。

5.2 相对单位的兼容性处理

• rem兼容IE8及以下：需通过JS动态设置根元素字体大小（如使用html5shiv配合respond.js）。
• vw兼容iOS8及Android4.4以下：可使用PostCSS插件postcss-px-to-viewport将vw转换为px降级处理。

5.3 性能优化

• 避免嵌套过深的媒体查询，减少CSS解析时间。
• 结合rem和vw使用：rem控制字体，vw控制布局，兼顾兼容性与开发效率。

六、自测题

1. 以下哪个viewport配置能实现理想视口？（ ） A. B. C. “ （答案：C）
2. 在html { font-size: 10px; }时，2.4rem等于多少像素？（ ） A. 24px B. 12px C. 2.4px （答案：A）
3. 要实现一个宽度始终为屏幕宽度80%的元素，最佳单位是？（ ） A. px B. rem C. vw （答案：C）
4. 简述rem和vw实现响应式的核心区别。 （答案：rem依赖根元素字体大小，需手动或通过JS/媒体查询调整；vw直接关联视口宽度，自动适配设备尺寸。）