一、视口（Viewport）：让网页“看清”设备的窗口
1. 什么是视口？
想象你用手机看网页时，浏览器就像一架“相机”，视口就是相机的“取景框”。
- 默认问题：早期手机屏幕小，但浏览器默认假装自己的“取景框”很宽（比如980px），导致网页被缩小，用户需要手动放大，体验极差。
- 解决方式：通过 <meta> 标签告诉浏览器：“别装！用真实的设备宽度作为取景框！”
2. 如何设置视口？
在 HTML 的 <head> 中添加以下代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">- 关键参数：width=device-width：视口宽度 = 设备宽度（比如 iPhone 的 375px）。initial-scale=1.0：初始缩放比例为 1（不放大也不缩小）。user-scalable=no（可选）：禁止用户手动缩放（慎用，可能影响无障碍访问）。
示例：
不设置视口 → 网页被缩成一团，文字小到需要“眯眼”看。
设置视口 → 网页自动填满屏幕，文字大小正常。
二、媒体查询（Media Queries）：给不同设备“定制皮肤”
1. 什么是媒体查询？
就像给手机、平板、电脑分别设计不同的 CSS 样式，媒体查询是“条件判断工具”，根据设备特性（如屏幕宽度）动态加载样式。
2. 基本语法
@media 媒体类型 and (条件) {
/* 满足条件时生效的 CSS */
}- 常用媒体类型：screen：屏幕设备（电脑、手机、平板）。print：打印机。
- 常用条件：max-width: 768px：屏幕宽度 ≤ 768px 时生效。min-width: 992px：屏幕宽度 ≥ 992px 时生效。orientation: landscape：横屏时生效。
3. 实战案例：响应式导航栏
需求：
- 大屏幕（≥992px）显示水平导航栏。
- 小屏幕（＜992px）显示折叠菜单按钮。
代码实现：
<!-- HTML -->
<nav class="navbar">
<button class="menu-btn">☰</button>
<ul class="nav-list">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>/* 默认样式（移动端优先） */
.nav-list {
display: none; /* 小屏幕隐藏菜单 */
}
.menu-btn {
display: block; /* 显示菜单按钮 */
}
/* 大屏幕样式 */
@media screen and (min-width: 992px) {
.menu-btn {
display: none; /* 隐藏按钮 */
}
.nav-list {
display: flex; /* 显示水平菜单 */
gap: 20px;
}
}4. 媒体查询的“断点”设计
- 常见断点参考（根据主流设备屏幕宽度）：手机：< 576px平板：≥576px 且 < 992px电脑：≥992px
- 设计原则：移动优先：先写默认样式（小屏幕），再用 min-width 逐步适配大屏幕。内容驱动：根据内容布局需要设置断点，而非死磕设备尺寸。
5. 高级技巧：媒体查询嵌套与逻辑
- 多条件组合：
/* 横屏且宽度≥768px */
@media screen and (min-width: 768px) and (orientation: landscape) {
/* ... */
}- 或逻辑（逗号分隔）：
/* 宽度≤576px 或 高度≤400px */
@media (max-width: 576px), (max-height: 400px) {
/* ... */
}三、常见问题与调试技巧
1. 为什么媒体查询不生效？
- 检查顺序：CSS 有层叠性，后面的样式会覆盖前面的。确保媒体查询代码位置正确。
- 视口未设置：忘记添加 <meta viewport> 标签。
- 单位错误：使用 px 而非 em 或 rem（推荐优先使用 rem）。
2. 如何调试响应式布局？
- 浏览器开发者工具：切换设备模式（Chrome 的 Device Toolbar）。实时调整屏幕尺寸，查看媒体查询触发点。
四、总结
- 视口：通过 <meta viewport> 让网页“脚踏实地”适配设备宽度。
- 媒体查询：用 @media 条件判断，为不同设备“量体裁衣”。
- 移动优先：先搞定小屏幕，再逐步增强大屏体验。
下一步：结合 Flexbox/Grid 布局，让响应式设计如虎添翼！