Question

设置viewport meta标签后，任何浏览器都不再缩放页面了，现在我们可以针对不同视口来修正设计效果。首先在CSS中为平板设备（如iPad）增加媒体查询，竖直iPad的视口宽度是768像素（横向视口宽度是1024像素，此时页面渲染效果很理想）。

媒体查询针对视口宽度不大于768像素的情况，重新调整了外壳、头部、页脚以及导航等页面元素的宽度。下图展示了此时页面在iPad上的效果：

上图的效果让我很受鼓舞。页面内容没再被剪切，而是与iPad屏幕（或者其他视口不超过768像素的设备）恰好匹配。但还得解决导航区链接超出背景图和主内容区浮动在侧边栏之下（因为内容区太宽，在有限的空间内放不下）这两个问题。我们再修改一下CSS中的媒体查询，代码片段如下所示：

现在，侧边栏和内容区填满了页面，且两边各留有适当的内边距。但这样的效果并不引人注目。我想把内容放在前面，把侧边栏放在后面（侧边栏的重要程度一般不高）。如果说我正在尝试制作一个真正的响应式设计，那在此处我又犯了一个低级错误。