在当前移动互联网时代，人们使用不同的设备来访问网站，如手机、平板电脑、电脑等。而且设备的屏幕大小也不尽相同，这就对前端工程师提出了响应式设计的要求，即对不同屏幕尺寸适配不同的布局和样式。媒体查询（media queries）是 CSS3 提供的一种利用 CSS 媒体类型和媒体特性，实现样式在特定条件下的应用的技术。下面我们将使用媒体查询实现多屏幕的响应式设计。
基本语法
媒体查询使用 @media 规则包裹一段 CSS 代码，当设备满足媒体查询的条件时，这段 CSS 代码才会生效。基本语法如下：
@media mediatype and (mediafeature:value) {
/* CSS rules */
}其中，mediatype 表示媒体类型，常见的有 all、print、screen，具体请参考 MDN 文档；mediafeature:value 是媒体特性和值的组合，用于描述设备的属性，如屏幕宽度、设备方向等。
媒体特性与值
媒体特性和值包含很多，下面列举一些常见的：
- width: 可视区域的宽度
- height: 可视区域的高度
- aspect-ratio: 宽高比
- orientation: 方向，可选值为 portrait 和 landscape
- device-width: 设备宽度，不包括滚动条和其他用户界面的软件
- device-height: 设备高度，不包括滚动条和其他用户界面的软件
- device-aspect-ratio: 设备宽高比，等同于设备宽度除以设备高度
- color: 颜色位数，可选值为 min-color，max-color 和 exact-color
- resolution: 设备像素比，可选值为 min-resolution，max-resolution 和 resolution
示例代码
为了更好地说明媒体查询的使用方法，我们可以通过以下示例代码来实现响应式设计。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- ---------------------------- -----------------
----------------- ------ ---------------
-------
-- ------ ------ --
---------- -
------ ----
------- - -----
-------- -----
----------------- --------
-
-- -
---------- -----
------------ -----
----------- -------
-
- -
---------- -----
------------ ----
-
-- ----- ------- --- ----- ------- --
------ ----------- ------ -
---------- -
------ ----
-------- -----
-
-- -
---------- -----
-
- -
---------- -----
-
-
-- ----- ------- --- ------ ------- --
------ ----------- ------ --- ----------- ------ -
---------- -
------ ----
-------- -----
-
-- -
---------- -----
-
- -
---------- -----
-
-
-- ----- ------- --- ----- ------- --
------ ----------- ------ -
-- ----- --------- ----- --- ------- --
---------- -
------ ----
-------- -----
-
-- -
---------- -----
-
- -
---------- -----
-
-
--------
-------
------
---- ------------------
-------------- ------ ------------
------- -- -- ------- -- --- -- --- ----- ------- -- ------ - ---------- ------ --- --------- ------ ----------
------
-------
-------在上面的代码中，我们使用媒体查询设置了针对不同屏幕尺寸的 CSS 样式，如页面宽度小于等于 576px 时，.container 的宽度为 90%、padding 为 10px，h1 的字号为 24px，p 的字号为 16px。
总结
使用 CSS 媒体查询可以很方便地实现多屏幕的响应式设计。前提是设计良好的界面，可以针对设备的不同特性调整布局和样式。如何使用媒体查询，关键在于媒体类型和特性、合理的分割点和合适的样式调整。在实践中，可以参考一些成熟的响应式设计框架，如 Bootstrap、Foundation 等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496557148841e98943645f7