# 布局与响应式设计-第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`元标签 **基本语法**（必须放在``标签内）： ```html ``` **核心属性**： | 属性 | 取值/说明 | | --------------- | ------------------------------------------------------------ | | `width` | `device-width`（设备宽度）或具体像素值（如`320`），定义布局视口宽度 | | `initial-scale` | 初始缩放比例（`0.1`-`10.0`），`1.0`表示不缩放 | | `minimum-scale` | 最小缩放比例（`0.1`-`10.0`） | | `maximum-scale` | 最大缩放比例（`0.1`-`10.0`），与`user-scalable=no`配合可禁止缩放 | | `user-scalable` | `yes`/`no`，是否允许用户缩放（`no`会影响可访问性，谨慎使用） | **推荐配置**（兼顾兼容性与可访问性）： ```html ``` ### 3.2 相对单位 #### 3.2.1 `rem`（根元素字体大小单位） - **定义**：相对于根元素（``）的字体大小（`font-size`） - **优势**：通过修改根元素字体大小，可统一调整页面所有使用`rem`的元素尺寸 - **换算关系**：若`html { font-size: 16px; }`，则`1rem = 16px`，`0.5rem = 8px` **示例**： ```css 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%）。 ```css .box { width: 50vw; /* 宽度为视口宽度的50% */ height: 30vh; /* 高度为视口高度的30% */ font-size: 5vmin; /* 字体大小为视口宽高中较小值的5% */ } ``` #### 3.2.3 单位对比与适用场景 | 单位 | 参照物 | 优势 | 适用场景 | | ----- | -------------- | ------------------------------ | ---------------------------- | | `px` | 固定像素 | 精确控制 | 固定尺寸元素（如边框、图标） | | `rem` | 根元素字体大小 | 统一调整，兼容性好（IE9+支持） | 响应式字体、组件尺寸 | | `vw` | 视口宽度 | 直接关联视口，无需JS计算 | 全屏布局、流体宽度元素 | | `vh` | 视口高度 | 适合高度自适应（如全屏banner） | 垂直方向自适应元素 | ## 四、实战示例 ### 4.1 基础示例：响应式字体 **需求**：实现字体大小随设备宽度变化，在320px设备上为14px，在768px设备上为16px，在1200px设备上为18px。 **实现步骤**： 1. 设置`viewport`元标签： ```html ``` 1. 使用`rem`单位定义字体，并通过媒体查询动态调整根元素字体大小： ```css /* 基础样式（默认适配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%。 **代码实现**： ```html ``` **效果**：在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`直接关联视口宽度，自动适配设备尺寸。）