响应式布局到底怎样玩？
1.jpg
响应式 Web 设计 - Viewport
什么是 Viewport?
viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
设置 Viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
响应式归根到底就是切换不同的CSS样式表
1、首先看看媒体查询：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>媒体查询</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
}
@media (min-width:768px) and (max-width:999px) {
.box {
background-color: green;
}
}
@media (min-width:1000px) {
.box {
background-color: purple;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2、准备工作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="css/pad.css" @media="(min-width:768px)"/>
<link rel="stylesheet" type="text/css" href="css/pc.css" @media="(min-width:1000px)"/>
<link rel="stylesheet" type="text/css" href="css/pc-width.css" @media="(min-width:1190px)"/>
</head>
<body>
</body>
</html>
如何在不同的宽度下加载不同的样式：
image.png
我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="style/reset.css"/>
<link rel="stylesheet" type="text/css" href="style/common.css"/>
<link rel="stylesheet" type="text/css"
href="style/pad.css" @media="(min-width:768px)"/>
<link rel="stylesheet" type="text/css"
href="style/pc.css" @media="(min-width:1000px)"/>
<link rel="stylesheet" type="text/css"
href="style/pc-w.css" @media="(min-width:1190px)"/>
</head>
<body>
</body>
</html>
下面我简单做一个例子：
html
image.png
css
image.png
image.png
image.png
切换的效果：
切换到max-width:500px,变成黑色
image.png
切换到min-width:500px,变成白色
image.png
