一、响应式页面概述
在我们学习媒体查询之前，先来了解一下什么事响应式页面
链接: 响应式页面.
这个是bootstrap的中文文档网站，大家可以用chrome浏览器来模拟手机端的浏览效果，可以看到手机端和电脑端访问同一个网页时，都能获得比较好的浏览体验。也就是说，一套代码可以同时适应多个设备。这样的网页就是响应式网页。
这里需要特别注意的是，我们访问同一个网站的地址，用手机可以正常浏览，用电脑也可以正常浏览，这并不一定就是响应式页面，例如晓舟报告官网就是响应式的，它只是针对终端设备的不同，展示了两套代码而已。响应式页面强调的是一套代码。
二、媒体查询
通过媒体查询，我们让css检测到浏览器视窗的展示尺寸，然后根据不同的浏览器视窗尺寸设置不同的样式，进而实现了同一套代码适应不同设备的功能。
1.max-width
媒体查询是CSS3中增加的新特性，可以使用@media来定义不同的条件和样式，窗口尺寸（或设备尺寸）满足指定条件的时候才会应用指定的样式。
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width:200px;
height:200px;
background-color: red;
}
/* 小于指定宽度，样式生效 */
@media screen and (max-width:600px){
.box{
background-color: blue;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
首先我们来看上面代码的效果，当全屏打开浏览器的时候（PC端的浏览方式），我们可以看到div元素的背景色为红色，当我们将浏览器的窗口缩小（移动端的浏览方式），当浏览器尺寸宽度小于600px的时候，元素的背景色会变成蓝色，这就是利用媒体查询实现的最基本的响应式页面，同一个文件，在不同设备上呈现着不同的样式。
在上面的代码中，max-width定义的就是标准，符合标准就会让下面的样式生效，max-width这个标准的意思就是：小于指定宽度，样式生效。
2.min-width
同样，我们也可以定义“大于指定宽度，样式生效”。
代码如下（示例）：
@media screen and (min-width:600px){
.box{
background-color: blue;
}
}
上述代码与demo01的效果刚好相反，PC端呈现蓝色，移动端呈现红色，min-width的意思是：大于指定宽度，样式生效。
3.多个标准
我们也可以给一个媒体查询定义多个标准。
代码如下（示例）：
@media screen and (min-width:600px) and (max-width:900px){
.box{
background-color: blue;
}
}
通过上面的方法，我们可以定义一个有多个标准的媒体查询，在上面的代码中，窗口大于600px并且小于900px的时候，样式生效，我们可以将浏览器窗口由大到小的收缩，可以看到元素颜色变化了两次。
三、响应式页面
我们利用媒体查询实现一个响应式的页面效果，让其在PC端可以显示一个横线列表，在手机端可以显示冲向列表，效果如下所示。
链接: 示例链接.
四、响应式页面的缺点
在真实项目开发中，响应式页面并不常用，主要是因为一下几点。
1.为终端定制的页面，用户体验更好。
2.响应式页面代码量会增多，影响网页性能。
3.网页后期维护成本增加。
除非网页具备以下特点：
1.网页本身并不复杂。
2.对用户体验要求不高。
3.希望多终端访问，又希望降低开发成本。
就可以选择响应式页面了。
446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
