8.4 针对智能手机优化布局

可是，这种改进的效果只能在一定范围内保持。如果布局宽度到了640像素以下（达到智能手机屏幕的宽度），那么第二行的form和nav接触，而它们下面的图书封面也会重叠。

我们需要在这个宽度上增加一个断点。

  1. @media only screen and (max-width:640px) {
  2.     header {height:100px;}
  3.     header nav.menu {width:94%; font-size:.65em; } /水平间距更多了/
  4.     section#book_area article { /博文摘要/
  5.         width:auto; 
  6.         float:none; 
  7.         margin:0; padding:0; /每本书的容器都与布局同宽/
  8.     }
  9.     section#feature_area aside form, 
  10.     section#feature_area aside nav { /博文链接/
  11.         margin:10px auto; /添加上、下外边距/
  12.         float:none; 
  13.     } 
  14.     section#book_area article .inner {width:98%; margin:0 0 0 5px; } /图片容器与布局同宽/
  15. #book_area  .inner h3 { /*取消文本旋转效果*/
  16.     -webkit-transform:none;
  17.     -moz-transform:none;
  18.     -moz-transform-origin:none;
  19.     -ms-transform-origin:none;
  20.     transform:none;
  21.     position:static;
  22. }
  23. #book_area article img { /*相对设备宽度确定图片宽度 */
  24.     width:40%;
  25. }
  26. section#book_area {background:#fff; padding: 0 10px 10px; margin:0 0 10px;}
  27. #book_area article aside { /*在图片旁边显示弹出层*/
  28.     display:block;
  29.     position:static;
  30.     float:right;
  31.     margin:0; padding:0 0 20px 0;
  32.     font-size:.8em;
  33.     border:none;
  34.     width:55%;
  35.     box-shadow:none;
  36. }
  37. section#book_area article aside::before, /*隐藏弹出层的三角*/
  38. section#book_area article aside::after {
  39.     display:none;
  40. }
  41. }

8.4 针对智能手机优化布局 - 图1 8.4 针对智能手机优化布局 - 图2
图8-5 单栏横屏布局在iPhone（和iPad）中效果不错图8-6 竖屏时只有页眉显得太大了

640像素的断点比1000像素的断点作出了更多改变。首先，此前并排的form和nav元素被取消浮动，变成与布局同宽，因而上下堆叠起来。其次，包含图书封面的容器，也由原来并列的一行，变成了现在的上下堆叠。此时，图书封面旁边的标题文字也没有必要再旋转了，它们在HTML标记里原本就在图片前面，只要去掉对文本的旋转声明，这些标题就会按照各自默认的static定位方式，自然地领衔每本书。弹出层也变得不再必要，因此要取消隐藏它们的声明及相关样式，把它们定位到每本书的旁边。以上这些改变得到了一个单栏、序列化的布局，非常适合智能手机。目前来看，页面中所有主要的元素都与布局同宽，而且相互堆叠在一起。

如图8-5和图8-6所示，我们还把图片宽度设定为40%，确保它们不可能比布局更宽。这个例子中使用的图片比较小，假如你使用的图片在小屏幕设备上比它们的容器还要宽，那么就需要在样式表中包含下面这条规则：

  1. img {max-width:100%;}

这条规则可以确保这些大图永远不会比它们的容器更宽，同时也不会影响它们缩小。这条规则体现了响应式设计的第三个要素：弹性图片。

布局中所有堆叠元素的宽度都是用相对于浏览器窗口的百分比设定的，因此当设备在横屏和竖屏间切换时，布局元素能够从容地重新排放。

针对竖屏进一步优化

如图8-6所示，iPhone竖屏时的页眉存在两个问题。一是菜单折行，二是搜索框压住了标题。这两个问题都很容易解决，为此我们要专门为iPhone竖屏再添加一个断点。虽然可以在媒体查询中使用portrait关键字，但我不想让iPad竖屏也应用这些样式。所以，这个断点依旧使用像素宽度，即将max-width设定为320像素，也就是iPhone竖屏时的屏幕宽度。

  1. @media only screen and (max-width:320px) { /*iPhone竖屏*/
  2.     header {height:90px;} /*缩小页眉高度*/
  3.     header section#title h1 {font-size:1.25em;} /*文本再小一点*/
  4.     header section#title h2 {font-size:.75em;} /*文本再小一点*/
  5.     header form.search {top:6px; right:2px;} /*搜索框上移*/
  6.     header nav.menu {font-size:.55em; margin-top:55px;} /*按比例缩小，并上移菜单*/
  7.     nav.menu ul li a {
  8.         padding:5px 4px; /*增大链接，方便点击*/
  9.         margin:0;
  10.     }
  11. }

enter image description here

图8-7 在iPhone竖屏的320像素宽度下，布局也非常漂亮了

如图8-7所示，以上CSS减少了页眉高度，把搜索框移到了右上角。通过设定较小的相对字体大小，菜单也更小了，因为菜单大小完全由链接的文本大小和围绕文本的内边距决定。既然链接文本和菜单元素变小了，那就可以把页眉的垂直高度再减少一点，腾出一点宝贵的空间。

现在，上至宽屏显示器，下至竖屏智能手机，都能获得最佳用户体验了。不过，要完成我们的响应式设计，还有一些细节问题要解决。