创建响应式设计的布局，我们可以先考虑网页上的内容，为内容的重要程度去排下顺序 … 然后，再去设计一些 Breakpoint … 断点 …

就是你想在哪个点上去改变页面的布局… 比如我们可以在可视窗口宽度大于 1200px 这里，设置一个 Breakpoint … 你可以去设计布局在这个 Breakpoint 上的变化 …

下面可以去试一下 … 打开资料包 xx 里的 … 这里你看到的是一个简单的布局 … （#点击）页头 .. 导航 .. 主体部分 … 边栏 … 还有页脚 …

在网页的样式表里，我事先添加了一些基本的样式 … 设置了布局的整体宽度 .. 是 960px …

浏览到样式表的最下方 …

去添加一个可视窗口大于 1200px 像素的媒体查询 …

@media (min-width:1200px){}

宽度大于 1200px 的屏幕，是比较大屏幕 … 所以在这个点上，我们可以增加页面的整体宽度 …

.container 类所在的元素是包装整个页面的元素 … 设置的宽度是 960px …

在这条媒体查询里，我们可以把 .container 里面的宽度改的大一些 …. 使用 width 属性 … 设置成 1170px …

这样当可视窗口的宽度大于 1200px 的时候 … 页面的整体的宽度会变成 1170px …

然后，我们再去设置一下，主体，还有边栏的宽度 … 因为页面的整体宽度变大了 … 所以主体和边栏的宽度也要随着变化 …

在主体内容上，定义了 #mainbody 这个 ID …. 在上面的样式里，你可以看到 … 它的宽度是 620px …. 这里，我们可以设置成 770px …

它的右边还有一个 20px 的右边距 … 我们让这个边距也变大一些 … margin-right:30px

然后再去设计一下边栏的宽度 … 页面整体宽度在可视窗口大于 1200px 的时候，是 1170px … 去掉主体的 770px ，再加上主体上的 30 个像素的边距 …

所以边栏上宽度应该是 370px …

保存一下 … 回到浏览器 …. 当前可视窗口的宽度是 1xxx ，小于 1200px … 所以页面的宽度仍然是原始的 960px …

调整一下窗口的宽度 … 注意 … 当宽度大于 1200px 的时候 … 会触发应用我们在可视窗口大于等于 1200px 时候所设计的样式 … 页面的整体宽度会变大 ….

主体和边栏的宽度也会变大 …

可视窗口小于 1200px 的时候 … 页面又会恢复成原来的样式 ….

@media (min-width:1200px){
.container{
width:1170px;
}
#mainbody{
width:770px;
margin-right:30px;
}
#sidebar{
width:370px;
}
}

@media (max-width:959px){
.container{
width:100%;
}
#mainbody{
width:67%;
}
#sidebar{
width:30%;
float:right;
}
}

@media (max-width: 767px){
#mainbody{
width:100%;
float:none;
}
#sidebar{
width:100%;
float:none;
}
}