随着科技的不断发展和普及，用户使用不同分辨率的设备浏览网站的需求也越来越多。传统的网页设计难以兼顾多个分辨率设备，而更加灵活的响应式设计正逐渐成为趋势。
响应式设计的核心思想是使页面能够随着不同设备的尺寸（或称宽度）自适应调整而不出现问题。而媒体查询则成为了实现响应式设计的一个重要手段。
媒体查询简介
媒体查询是CSS3引入的一个重要特性。通过判断设备的某些属性，比如视窗宽度、像素密度等等，媒体查询能够在样式表中针对各种设备的属性应用指定的CSS规则。这是由CSS的属性和值组成的条件语句。
媒体查询分为三个部分：
- 媒体类型：对应于呈现设备的类型。
- 表达式：这是一个由零个或多个逗号分隔的键值对。键表示的是媒体查询特性（比如width），值是一个用于比较的特性单位（比如px）和一个特定的特性值（比如800px）。
- 媒体查询块：其中包含的样式规则会在媒体查询条件为真时应用到文档中。
如何使用媒体查询
响应式设计的关键是定义好不同设备的媒体查询，这样在具体渲染时，就能够根据设备尺寸动态调整页面设计。
下面是一个媒体查询的示例代码：
-- ------------- --
------ ----------- ------ -
---- -
----------------- --------
-
-------- -
------ -----
------- --
-------- --
-
-
------ ----------- ------ --- ----------- ------ -
-------- -
------ -----
------- --
-------- --
-
-
------ ----------- ------ -
-------- -
------ ----
------- -----
-------- -----
-
-在上述示例中，媒体查询选择器 @media 定义了一些设备尺寸，分别对应小于600 pixel、600-900 pixel、大于900 pixel 三种情况。各对应尺寸下的样式变化如下：
- 当设备尺寸小于600 Pixel 时，整个页面设置为背景色#f0f0f0，.wrapper宽度100%
- 当设备尺寸介于600-900 Pixel 之间，.wrapper宽度设置为100%
- 当设备尺寸大于900 Pixel 时，.wrapper 宽度设置为80%
个人认为，媒体查询应用到响应式设计中有如下几个优点：
- 定义了不同设备尺寸下的页面布局和样式。
- 可以针对不同设备尺寸进行定制化，更加贴合用户需求。
- 避免多套代码生成，资源利用率更高。
总结
响应式设计是一种处理多设备访问问题的技术选择，相较传统的桌面端设计更加灵活、人性化。而媒体查询正是响应式设计的核心思想，通过其所支持的设备及其他属性，以灵活的方式调整布局及设计，能够更好的适应用户的需求。除了简单的实现页面布局之外，媒体查询还能够处理导航的排版及材料等问题。总之，好好使用它，会让你的页面更具新潮感和人性化。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652d0e287d4982a6ebe895ff