@media 查询如何配合语义化结构

当使用语义化标签构建页面骨架后，可以通过媒体查询针对不同设备优化布局，保持结构语义不变的同时灵活调整视觉呈现。

为

在小屏中改为折叠菜单，大屏中显示为横向导航栏 调整

在移动端的位置，避免遮挡主要内容 根据屏幕宽度决定

是否采用多列布局

示例：基于语义结构的响应式导航

立即学习“前端免费学习笔记（深入）”；

  
我的网站
  
  .main-nav ul {    display: flex;    list-style: none;  }  @media (max-width: 768px) {    .main-nav ul {      flex-direction: column;    }    header {      text-align: center;    }  }

语义化 + 媒体查询的最佳实践

将语义结构与响应式样式结合时，注意以下几点更有利于长期维护和可读性：

保持 HTML 结构简洁清晰，用语义标签准确表达内容层级 媒体查询中优先针对容器类语义标签设置响应规则，如 main、section 避免在 CSS 中破坏原有语义结构的视觉顺序，特别是在移动设备上 配合 ARIA 属性和键盘导航，确保响应式变化不影响可访问性

基本上就这些。合理使用语义化标签，并通过 @media 灵活控制样式，能让网页在各种设备上既美观又易于理解。结构清晰，样式灵活，才是高质量前端代码的核心。