HTML媒体查询怎么用？响应式布局教程

HTML媒体查询（@media）是构建真正响应式网页的核心技术，它能根据设备屏幕宽度、方向等特性动态应用不同CSS样式，让同一套代码在手机、平板、桌面等各类设备上都呈现最优布局与体验；文章系统讲解了其基本语法、科学断点设置（如576px、768px、1200px）、与Flexbox/Grid的协同用法，以及横竖屏适配技巧，强调以内容为驱动、按最小宽度递增顺序编写断点，避免样式覆盖陷阱——掌握这些，你就能高效打造灵活、健壮、跨设备一致的现代网页。

HTML媒体查询（@media）是实现响应式布局的核心工具，它允许你根据设备的屏幕尺寸、分辨率、方向等条件来应用不同的CSS样式。通过@media，网页可以在手机、平板、桌面等不同设备上呈现出最佳的视觉效果。

1. 媒体查询的基本语法

媒体查询使用 @media 规则包裹CSS样式，只有当指定条件满足时，内部的样式才会生效。

@media mediatype and (condition) {
  /* CSS 样式 */
}

常见用法示例：

• mediatype：如 screen（屏幕）、print（打印）等，常用的是 screen。
• condition：通常是带有宽度、高度或方向的表达式，比如 max-width: 768px。

最典型的写法是根据屏幕宽度调整布局：

@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    width: 100%;
    padding: 10px;
  }
}

2. 常用断点设置移动端适配

响应式设计通常会针对不同设备设定“断点”（breakpoints），常见的断点参考如下：

• 手机竖屏：max-width: 480px 或 576px
• 平板：min-width: 768px
• 桌面端：min-width: 992px 或 1200px

实际项目中可以这样组织：

/* 手机默认样式 */
.container {
  width: 100%;
}
<p>/<em> 平板及以上 </em>/
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}</p><p>/<em> 桌面大屏 </em>/
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}</p>

3. 结合CSS Flex和Grid实现灵活布局

媒体查询常配合现代CSS布局技术使用，比如Flexbox或Grid，让结构更自适应。

例如在小屏幕上使用垂直排列，在大屏幕上变为水平排列：

.nav {
  display: flex;
  flex-direction: column;
}
<p>@media (min-width: 768px) {
.nav {
flex-direction: row;
justify-content: space-around;
}
}</p>

4. 使用orientation区分横竖屏

除了宽度，还可以监听设备的方向变化：

@media (orientation: portrait) {
  .banner {
    height: 200px;
  }
}
<p>@media (orientation: landscape) {
.banner {
height: 100px;
}
}</p>

这在移动设备旋转时特别有用。

基本上就这些。掌握 @media 查询的关键是合理设置断点，并结合实际内容调整样式。不需要为每种设备单独写一套样式，而是以内容为主线，逐步优化显示效果。不复杂但容易忽略细节，比如断点顺序和样式的覆盖关系。

以上就是《HTML媒体查询怎么用？响应式布局教程》的详细内容，更多关于的资料请关注golang学习网公众号！