下面我们可以为小尺寸的设备去设置一个断点 … iPad 在垂直状态下，它的宽度是 768px … 我们可以设置在这个宽度以下的媒体查询 … 一般的智能手机垂直或者水平方向的宽度都会小于这个尺寸 …

@media (max-width: 767px){} ….

这条媒体查询的意思就是，如果可视窗口的宽度小于或者等于 767px 的时候 .. 会应用在后面大括号里的样式 …

对于小尺寸的设备来说 … 我们就不需要再把页面分成两栏显示了 .. 可以把它们堆砌在一起 …

这里，我们只需要取消主体和边栏的浮动 … 再把它们的宽度设置成 100% 就行了 ….

#mainbody, #sidebar{
width:100%;
float:none;
}

保存 … 打开浏览器 …

调整一下可视窗口的大小 … 宽度小于等于 767px 的时候 … 主体和边栏会堆砌在一起 ….

再预览一下我们设计的这个布局 …

放大可视窗口的宽度 … 大于 767px 以后，布局恢复成两栏 … 宽度是流动的 …

大于等于 960px 的时候 … 页面布局变成固定的宽度 …

当可视窗口超过 1200px 的时候 …. 布局整体宽度会增加 … 主体和边栏的宽度也会增加 …