固定导航栏适配关键在于响应式设计：1. 使用百分比、rem等相对单位布局，避免固定像素；2. 通过媒体查询调整不同设备样式，如小屏隐藏菜单显示汉堡按钮；3. 用100dvh替代100vh防止移动端浏览器ui影响定位；4. 给body添加padding-top防止内容被遮挡。
固定导航栏（position: fixed）在不同屏幕尺寸下适配的关键在于响应式设计。只要合理使用 CSS 布局与媒体查询，就能让导航栏在手机、平板、桌面等设备上都表现良好。
1. 使用视口单位和百分比布局
避免使用固定像素宽度，改用相对单位提升适配性：
- width: 100% 让导航栏撑满屏幕宽度
- max-width 控制大屏下的最大宽度，居中显示
- padding 和 margin 使用 rem 或 em，随字体缩放
示例：
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
z-index: 1000;
}
2. 移动端适配：使用媒体查询
通过 @media 调整不同屏幕下的样式，比如字体大小、菜单折叠方式。
- 小屏幕隐藏菜单项，显示“汉堡按钮”
- 调整文字大小，避免溢出
- 设置合适的内边距，防止内容贴边
示例：
@media (max-width: 768px) {
nav {
height: 50px;
}
nav ul {
display: none; /* 隐藏菜单 */
}
.menu-toggle {
display: block; /* 显示汉堡按钮 */
}
}
3. 处理移动端浏览器 UI 高度变化
某些手机浏览器（如 Safari）地址栏会动态收起，影响 fixed 元素定位。可用 vh 单位时注意这个问题。
- 避免依赖 height: 100vh 在移动端
- 用 height: 100dvh（dvh = dynamic viewport height）更稳定
提示：
/* 更兼容的视口高度 */
.container {
min-height: 100dvh;
}
4. 避免内容被遮挡
fixed 导航栏会脱离文档流，可能遮住页面顶部内容。
- 给 添加 padding-top，值等于导航栏高度
- 或使用 margin-top 布局留白
示例：
body {
padding-top: 60px; /* 匹配导航栏高度 */
}
基本上就这些。关键是用弹性布局 + 媒体查询 + 注意移动端细节，fixed 导航栏就能在各种屏幕上正常显示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
