在现代 Web 开发中，响应式设计（Responsive Design）已经成为了不可缺少的一部分。在不同的设备上，网站可以灵活地做出自适应的布局和样式，让用户体验更加友好，同时也为开发者带来更大的挑战和可能性。
而 CSS 媒体查询（Media Queries）则是实现响应式设计的关键技术之一。本文将详细介绍媒体查询的原理和用法，以及一些实际应用的经验和技巧。
媒体查询的原理
媒体查询可以通过查询媒体类型（Media Type）和媒体特性（Media Feature）来判断当前设备的属性，从而应用不同的 CSS 样式。例如：
@media screen and (max-width: 768px) {
/* 当屏幕宽度小于等于 768px 时应用此样式 */
body {
font-size: 14px;
}
}这段 CSS 代码表示了一个媒体查询的示例，意义为当屏幕类型为“屏幕”（即电脑、手机等设备的屏幕）、屏幕宽度不超过 768px 时，应用此样式。其中，screen 表示媒体类型，即屏幕；max-width 表示媒体特性，即最大宽度；768px 表示具体的媒体参数，即宽度的阈值。
媒体查询可以包含多个媒体特性，也可以与或非逻辑组合。例如：
@media screen and (max-width: 768px) and (orientation: portrait) {
/* 当屏幕宽度不超过 768px 且为竖屏时应用此样式 */
body {
font-size: 12px;
}
}这段 CSS 代码表示了一个更加复杂的媒体查询示例，意义为当屏幕类型为“屏幕”、屏幕宽度不超过 768px、屏幕方向为竖屏时，应用此样式。其中，orientation 表示屏幕方向。
媒体查询的应用实践
常见的媒体特性
在实际的开发中，我们通常会使用一些常见的媒体特性来判断设备属性。例如：
max-width/min-width：屏幕宽度的最大 / 最小值。max-height/min-height：屏幕高度的最大 / 最小值。orientation：屏幕方向（竖屏 / 横屏）。aspect-ratio：屏幕纵横比。device-pixel-ratio：设备像素比。color/color-index：屏幕的颜色 / 颜色深度。resolution：屏幕分辨率，单位为 DPI 或 DPPX。
通过这些媒体特性的组合，可以实现不同设备上的自适应布局和样式。例如，下面是一个简化的响应式布局示例：
<div class="container">
<div class="sidebar">
<!-- 侧栏内容 -->
</div>
<div class="main">
<!-- 主内容 -->
</div>
</div>-- -------------------- ---- -------
-- ------ --
---------- -
-------- -----
--------------- ----
-
-------- -
------ ------
------------- -----
-
----- -
----- --
-
-- ----- --
------ ------ --- ----------- ------ -
---------- -
--------------- -------
-
-------- -
------ -----
-------------- -----
-
-这段 CSS 代码表示了一个简单的响应式布局，意义为在普通屏幕上（屏幕宽度大于 768px）使用 flex 布局，将侧栏和主内容一行显示；在小屏幕上（屏幕宽度不超过 768px）使用垂直布局，将侧栏和主内容上下堆叠。其中，max-width 表示屏幕宽度不超过 768px。
常见的容错处理
在使用媒体查询时，还需要考虑一些特殊的情况和容错处理。例如：
- 浏览器不支持媒体查询：可以使用 JavaScript 或真实的设备进行兼容测试。
- 相邻媒体查询的覆盖问题：需要注意媒体查询的先后顺序，一般是从小到大排序。
- 不同屏幕宽度的兼容问题：需要对不同的屏幕宽度进行测试和处理，尽可能保证良好的适配效果。
参考资料
总结
CSS 媒体查询是实现响应式设计的重要技术之一，可以帮助我们根据设备属性应用不同的 CSS 样式。在使用媒体查询时，需要了解常见的媒体特性和容错处理，以实现更好的自适应效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471c6d6968c7c53b0fa41bf