随着移动设备的普及，越来越多的网站需要适应不同的屏幕尺寸和设备。响应式设计就是为了解决这个问题，让网站能够在不同的屏幕尺寸下正常显示并提供良好的用户体验。
媒体查询是实现响应式设计的关键技术之一。它可以根据不同的屏幕尺寸和设备特性，针对不同情况下的 CSS 样式进行定制和调整，从而达到不同设备下最佳的显示效果。
媒体查询的语法和使用
媒体查询可以通过 CSS3 中的 @media 规则来实现。@media 规则包含了一个查询条件和一组 CSS 样式，只有当查询条件满足时，其中的 CSS 样式才会被应用。
媒体查询的语法如下：
@media 媒体类型 and (查询条件) {
/* CSS 样式 */
}其中，媒体类型 表示要匹配的媒体类型，例如 screen、print、speech 等；查询条件 是一组用于匹配特定设备的条件，例如屏幕宽度、高度、方向等。
以下是一个简单的媒体查询示例，它将针对 768px 以下的屏幕应用不同的样式：
@media screen and (max-width: 768px) {
/* CSS 样式 */
}媒体查询的应用示例
媒体查询可以实现很多有用的特性，以下是一些常见的应用场景：
1. 响应式布局
媒体查询可以根据不同屏幕尺寸和方向，自动应用不同的布局样式。例如，在手机上，我们可以使用垂直布局，而在 iPad 上，我们可以使用更宽的页面布局。
@media screen and (max-width: 480px) {
/* 手机垂直布局 */
}
@media screen and (min-width: 481px) and (max-width: 1024px) {
/* iPad 横向布局 */
}2. 图片适应
媒体查询可以使图片适应不同的屏幕尺寸。例如，在小屏幕设备上，我们可以使用小尺寸的图片，而在高分辨率设备上，我们可以使用更大的图片。
-- -------------------- ---- -------
------ ------ --- ----------- ------ -
------- -
----------------- ------------------------
-
-
------ ------ --- ----------- ------ --- ----------- ------- -
------- -
----------------- -------------------------
-
-
------ ------ --- ----------- ------- -
------- -
----------------- ------------------------
-
-3. 字体大小
媒体查询可以根据不同的屏幕尺寸，自动调整字体大小。例如，在小屏幕设备上，我们可以使用较小的字号，而在大屏幕设备上，我们可以使用更大的字号。
-- -------------------- ---- -------
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-
------ ------ --- ----------- ------ --- ----------- ------- -
---- -
---------- -----
-
-
------ ------ --- ----------- ------- -
---- -
---------- -----
-
-总结
媒体查询是实现响应式设计的重要技术之一，它可以根据不同的屏幕尺寸和设备特性，针对不同情况下的 CSS 样式进行定制和调整，从而实现更好的用户体验。在编写响应式设计时，要充分利用媒体查询，根据不同情况下的需求，进行灵活的样式定制和调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646e09b1968c7c53b0ca20b2