8.3 针对平板优化布局

第7章的网页（或布局）目前是固定的980像素宽，而且在比980像素更宽的浏览器窗口内会居中。随着浏览器窗口变窄，比如在平板电脑或手机上浏览这个页面时，布局的右边会被浏览器窗口切掉。为此，我想第一个断点应该设定在布局的固定宽度之上，即1000像素。如果浏览器窗口变得比这个断点还要窄，那么我希望布局能够变成流动的，以便它能够自己缩小宽度来适合浏览器窗口。回忆一下，这个网页布局中的所有结构化元素，使用的都是auto或者百分比宽度值，因此从固定到流动的转换很简单，只要把固定宽度的外包装元素设为百分比宽度就行了。

百分比宽度体现了响应式设计的第二个要素——流动布局。

  1. /*98%可以保证两边有一点边距*/
  2. #wrapper {width:98%;}

不过，布局变成流动之后会出现几个问题。

enter image description here图8-3 在iPad竖屏状态下，布局中的区块交叠到了一起

如图8-3所示，随着布局宽度变窄——这里是在iPad竖屏，即768像素宽度的情况下，导航菜单已经压在了其左侧的页面标题上面。而中间的登录表单和博文链接也都盖住了部分博文内容。显然，菜单的定位方式及页眉下方的两栏布局不适合这么窄的屏幕。

那好，这就是我们在1000像素断点中需要解决的问题。还是先来看一看断点中的CSS规则，之后再听我解释。

  1. @media only screen and (max-width:1000px) { /*1000像素的断点*/
  2.     body { 
  3.         margin:0 8px 20px; /*添加右外边距，以防滚动条碍事儿*/
  4.     }
  5.     #wrapper {width:98%;} /*布局由固定变成流动*/
  6.     header {
  7.         height:100px; /*增加页眉高度，为重新定位菜单留出空间*/
  8.         padding:1px 0 0 0; /*防止导航菜单的上外边距叠加*/
  9.     }
  10.     header nav.menu {
  11.         margin-top:65px; /*把菜单移动到页面标题和搜索框下方 */
  12.     }
  13.     section#feature_area {padding-bottom:0;} /*用不着了*/
  14.     section#feature_area article { /*让博文摘要部分与布局同宽*/
  15.         float:none; /*不需要浮动了*/
  16.         width:auto;/*自动填满布局*/
  17.     }
  18.     section#feature_area aside { /*原来的右栏同样与布局同宽*/
  19.         float:none; 
  20.         width:auto;
  21.     }
  22.     section#feature_area aside form {
  23.         float:left; /*浮动到左侧*/
  24.         margin:15px 0 0 0; /*与nav的上外边距一致*/
  25.     }
  26.     section#feature_area aside nav {
  27.         width:17em; /*缩小博文链接区的宽度*/
  28.     }
  29. } /*1000像素断点结束*/

图8-4展示了应用以上断点规则后，通过iPad竖屏模式浏览页面会看到不一样的效果。iPad横屏时的宽度大于1000像素，因此不会应用以上规则，仍然是图8-1中的样子，而在竖屏时由于宽度小于1000像素，所以就会得到新的流动布局。

enter image description here图8-4 当布局窗口变得小于1000像素之后，就会应用媒体查询中的CSS规则。菜单移到下方，而原来右栏的元素重新定位到了左栏下方

如图8-4所示，通过媒体查询应用新规则之后，页眉高度和菜单上外边距都增加了。这些变化让菜单移到了页眉底部新增的空间，它现在位于标题和搜索框之下了。

feature_area也不一样了，它的两个子元素——包含博文摘要的article和包含登录表单及博文链接的aside被取消了浮动并将宽度重设为auto。它们由左右并列变成了上下堆叠，并分别填满布局宽度。在aside内部，表单向左浮动，因而form和nav并列在一起，共同位于article元素下方（nav本来就是向右浮动的）。另外，为了在布局宽度缩小到下一个断点（640像素）之前，不让nav元素碰到表单的右边，我们还把nav元素稍微设定得窄了一些。（下一个断点的情况稍后介绍。）

此时，还不需要对book_area写什么新样式，因为一开始我们就给每本书的容器都设定了25%的宽度，并没有设定固定的宽度。所以，这些图书封面及各自相应的文字只会随着布局变窄而靠得更近。

在iPad或其他窗口宽度小于1000像素的非移动浏览器中，这种布局会给人更好的阅读体验。好啦，接下来再看一看如果布局宽度进一步变窄又会如何。