在今天的多设备和多分辨率的时代，响应式设计是一个非常重要的概念。它是指网站或应用程序能够根据用户使用的设备和屏幕大小自动适应布局和样式。其中，media query 是实现响应式设计的重要技术之一。在本文中，我们将深入了解 media query，包括其语法、用法和示例代码。
什么是 media query
media query 是一种 CSS3 技术，它允许我们根据不同的媒体类型和特性来应用不同的样式。媒体类型包括屏幕、打印机、电视等，特性包括宽度、高度、分辨率、方向等。通过 media query，我们可以根据不同的设备和屏幕大小来自动适应网站或应用程序的布局和样式，从而实现响应式设计。
media query 的语法
media query 的语法非常简单，它由一个 @media 关键字和一个条件表达式组成。条件表达式用括号括起来，其中包含一个或多个媒体类型和特性，用逗号分隔。例如：
@media screen and (min-width: 768px) {
/* 样式代码 */
}上面的代码表示当屏幕宽度大于等于 768 像素时，应用其中的样式代码。其中，screen 表示媒体类型为屏幕，min-width 表示最小宽度为 768 像素。
media query 的用法
media query 的用法非常灵活，它可以应用于任何 CSS 规则中。例如，我们可以在样式表中为不同的屏幕大小定义不同的样式：
-- -------------------- ---- -------
-- ---- --
---- -
---------- -----
-
-- ------- --- --- --
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-
-- --------- --- --- --
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-上面的代码表示当屏幕宽度小于 768 像素时，应用字体大小为 14px 的样式；当屏幕宽度大于等于 768 像素时，应用字体大小为 18px 的样式；否则，应用字体大小为 16px 的默认样式。
除了应用于样式表中，media query 还可以应用于 HTML 元素的 style 属性中。例如：
<p style="color: red; @media screen and (max-width: 767px) {color: blue;}">
这是一段文本。
</p>上面的代码表示当屏幕宽度小于 768 像素时，文本颜色为蓝色；否则，文本颜色为红色。
media query 的示例代码
下面是一些常用的 media query 示例代码，供大家参考：
响应式导航菜单
<nav class="navbar">
<ul class="nav">
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item"><a href="#">About</a></li>
<li class="nav-item"><a href="#">Services</a></li>
<li class="nav-item"><a href="#">Contact</a></li>
</ul>
</nav>-- -------------------- ---- -------
-- ---- --
------- -
-------- -----
---------------- ---------
-
---- -
-------- -----
----------- -----
------- --
-------- --
-
--------- -
------------ -----
-
--------------------- -
------------ --
-
-- ------- --- --- --
------ ------ --- ----------- ------ -
------- -
---------------- -------
-
---- -
-------- -----
--------------- -------
--------- ---------
---- -----
----- --
------ --
----------------- -----
-------- -----
-
--------- -
------- ---- --
-
--------------------- -
----------- --
-
-------------------- -
-------------- --
-
------------- ---- -
-------- -----
-
-上面的代码表示当屏幕宽度小于 768 像素时，导航菜单会变成一个下拉菜单，鼠标悬停时才会显示菜单项。
响应式图片
<img src="image.jpg" alt="Image">
-- -------------------- ---- -------
-- ---- --
--- -
---------- -----
------- -----
-
-- ------- --- --- --
------ ------ --- ----------- ------ -
--- -
---------- ----
-
-上面的代码表示当屏幕宽度小于 768 像素时，图片的最大宽度为屏幕宽度的一半。
总结
media query 是实现响应式设计的重要技术之一，它能够根据不同的媒体类型和特性来应用不同的样式，从而实现自动适应布局和样式。通过本文的介绍，我们了解了 media query 的语法、用法和示例代码，希望能够对大家实现响应式设计有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d170edadd4f0e0ffa20f62