学习任务

学习制作响应式导航

1.pc端效果

    2.移动端效果

学习目标

    1.掌握媒体查询语法、断点分类，分清min-width(移动优先) 与max-width(桌面优先) 区别

    2.熟记 768px（平板）、1024px（桌面）行业通用断点

    3.理解移动优先开发思想，对比移动优先 / 桌面优先优缺点

网页制作步骤

关键要点

1.应该设置多少个断点？

通常设置pad端768px，pc端1024px。

2.min-width和max-width如何选择？

移动优先用min-width，

@media (min-width: 768px) {.head-container {

max-width: 1200px;  /* 添加版心限制 */

margin: 0 auto;

}

/* 隐藏汉堡按钮 */

.toggle-btn {

display: none;

}

}

@media (min-width: 1024px) {

.nav-menu ul {

gap: 40px;

/* 桌面端可以稍微增加间距 */

}

.nav-menu a {

font-size: 18px;

position: relative;

}

}

3.媒体查询的顺序重要吗？

是的，CSS层叠规则适用，建议统一使用min-width并从小到大排列

4.为什么要 “移动优先” 而不是 “桌面优先”？

（1） 迫使功能去冗余

手机屏幕空间极其有限，这迫使产品经理和设计师必须在方寸之间做取舍。如果采用“桌面优先”，往往会因为屏幕大而堆砌大量次要功能；而“移动优先”要求你必须先搞清楚：用户打开这个应用最想干的那件事是什么。

（2） 适配流量重心与搜索算法

目前全球超过 65% 的流量来自移动端。包括 Google 在内的搜索引擎早已采用“移动优先索引”，这意味着如果你的移动端体验差，即便桌面端做得再美，搜索排名也会被严重拉低。

（3） 渐进增强（Progressive Enhancement）

从技术实现上看，从简单的移动端布局向复杂的桌面端扩展（加功能、分栏），逻辑上属于“向上兼容”，结构更稳固；反之，从复杂的桌面端向移动端强行压缩（优雅降级），往往会导致代码臃肿和体验割裂。

5.移动端导航用 position: absolute，桌面端改成 static，为什么要做这个调整？

这种调整的核心逻辑是处理元素与文档流的关系。

（1）移动端使用 absolute：实现“悬浮抽屉”

移动端导航（如汉堡菜单）通常需要覆盖在内容之上，或者以抽屉形式弹出。absolute 能让导航脱离文档流，不占用页面实际空间，从而自由地叠加在现有内容（图片、文字）顶部，且不影响下方布局的稳定性。

（2） 桌面端改成 static：回归“自然占位”

桌面端导航通常是固定在顶部的长条。使用 static 是为了让导航回归标准文档流。这样它就能实实在在地占据页面顶部的空间，自动把下方的 Banner 或正文内容“顶”下去，避免内容被导航栏遮挡。