我们可以继续为其它尺寸的设备去设置一些断点 … 比如当可视窗口宽度小于 960px 的时候 … 我们让页面的布局由固定宽度的布局，变成流动布局 …

下面去设计一下这条媒体查询 …

@media (max-width:959px){}

max-width 的意思就是可视窗口宽度小于或者等于 …

先设置页面容器的宽度为 100% … 包装整个页面的容器的上面有一个 .container 类 …

container{
width:100%;
}

这样当可视窗口的宽度小于或等于 959px 的时候 … 页面就会由固定的宽度变成流动的宽度 … 设置一个百分比的宽度值 ，可以把布局变成流动的。

下面再去设置一下主体还有边栏 … 主体上的 ID 是 #mainbody … 我们让主体内容占用 67% 的宽度 …

#mainbody{
width:67%;
}

然后再设置一下边栏的宽度 … 边栏上定义了一个 sidebar ID … 让边栏占用 30% 的宽度 … 这样边栏和主体加起来的宽度是 97% … 剩下的 3% 可以作为边栏和主体之间的间隔 …

我们可以让边栏浮动到右边去显示 …

#sidebar{
width:30%;
float:right;
}

保存 …. 回到浏览器上预览一下 ….

调整可视窗口的宽度 … 当可视窗口小于等于 959px 的时候 … 页面会变成流动布局 … 继续缩小可视窗口的宽度 …. 整个布局也会随着缩小 …

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