HTML媒体查询通过@media规则根据设备特性应用不同CSS样式，实现响应式布局。1. 基本语法为@media mediatype and (condition) { ... }，常用screen类型与max-width、min-width等条件控制样式生效时机。2. 常见断点设置包括：手机（≤480px或576px）、平板（≥768px）、桌面（≥992px或1200px），按最小宽度递增顺序定义可避免覆盖问题。3. 结合Flexbox或Grid布局，在不同屏幕下调整元素排列方式，如小屏垂直、大屏水平。4. 可使用orientation区分横竖屏，适配移动设备旋转场景。关键在于以内容为主导，合理设置断点并注意样式优先级与执行顺序，确保跨设备一致体验。
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 查询的关键是合理设置断点，并结合实际内容调整样式。不需要为每种设备单独写一套样式，而是以内容为主线，逐步优化显示效果。不复杂但容易忽略细节，比如断点顺序和样式的覆盖关系。
