随着科技的不断发展和普及，用户使用不同分辨率的设备浏览网站的需求也越来越多。传统的网页设计难以兼顾多个分辨率设备，而更加灵活的响应式设计正逐渐成为趋势。
响应式设计的核心思想是使页面能够随着不同设备的尺寸（或称宽度）自适应调整而不出现问题。而媒体查询则成为了实现响应式设计的一个重要手段。
媒体查询简介
媒体查询是CSS3引入的一个重要特性。通过判断设备的某些属性，比如视窗宽度、像素密度等等，媒体查询能够在样式表中针对各种设备的属性应用指定的CSS规则。这是由CSS的属性和值组成的条件语句。
媒体查询分为三个部分：
- 媒体类型：对应于呈现设备的类型。
- 表达式：这是一个由零个或多个逗号分隔的键值对。键表示的是媒体查询特性（比如width），值是一个用于比较的特性单位（比如px）和一个特定的特性值（比如800px）。
- 媒体查询块：其中包含的样式规则会在媒体查询条件为真时应用到文档中。
如何使用媒体查询
响应式设计的关键是定义好不同设备的媒体查询，这样在具体渲染时，就能够根据设备尺寸动态调整页面设计。
下面是一个媒体查询的示例代码：
// javascriptcn.com 代码示例
/* 根据设备尺寸来改变页面布局 */
@media (max-width: 600px) {
body {
background-color: #f0f0f0;
}
.wrapper {
width: 100%;
margin: 0;
padding: 0;
}
}
@media (min-width: 601px) and (max-width: 900px) {
.wrapper {
width: 100%;
margin: 0;
padding: 0;
}
}
@media (min-width: 901px) {
.wrapper {
width: 80%;
margin: auto;
padding: 20px;
}
}在上述示例中，媒体查询选择器 @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