HTML5+CSS3响应式设计（二）
上一节传送门《HTML5+CSS3响应式设计（一）》
设置 viewport meta标签后，任何浏览器都不再缩放页面了，这一节我们可以针对不同视口
来修正设计效果。
一、我们用一个ipad（1024*768）来说明这一点
上一节中我们的页面是960px宽度，我们ipad如果是横屏显示1024px，页面显示很正常。
如果是竖屏显示768px，页面会被裁剪。
下面我们在样式表中增加媒体查询样式：
1 @media screen and (max-width: 768px) { 2 #wrapper { 3 width: 768px; 4 } 5 #header,#footer,#navigation { 6 width: 748px; 7 } 8 }
媒体查询针对视口宽度不大于 768 像素的情况，重新调整了外壳、头部、页脚以及导航
等页面元素的宽度。
添加上面的媒体查询后，虽然里面并不好看，但是好歹页面没有被裁减，整个页面信息都能看到！
同样可以采用该方法来调整一下局部：
1 @media screen and (max-width: 768px) { 2 #wrapper { 3 width: 768px; 4 } 5 #header,#footer,#navigation { 6 width: 748px; 7 } 8 #content,#sidebar { 9 padding-right: 10px; 10 padding-left: 10px; 11 width: 728px; 12 } 13 }
二、响应式设计中应该让内容始终优先显示
再来看下之前的界面：
为了便于之后的理解，也贴出页面结构的代码：
1 <body> 2 <div id="wrapper"> 3 <!-- the header and navigation --> 4 <div id="header"> 5 <div id="navigation"> 6 <ul> 7 <li><a href="#">navigation1</a></li> 8 <li><a href="#">navigation2</a></li> 9 </ul> 10 </div> 11 </div> 12 <!-- the sidebar --> 13 <div id="sidebar"> 14 <p>here is the sidebar</p> 15 </div> 16 <!-- the content --> 17 <div id="content"> 18 <p>here is the content</p> 19 </div> 20 <!-- the footer --> 21 <div id="footer"> 22 <p>Here is the footer</p> 23 </div> 24 </div> 25 </body>
css如下：
1 #wrapper { 2 margin-right: auto; 3 margin-left: auto; 4 width: 960px; 5 } 6 7 #header { 8 margin-right: 10px; 9 margin-left: 10px; 10 width: 940px; 11 background-color: #779307; 12 } 13 14 #navigation ul li { 15 display: inline-block; 16 } 17 18 #sidebar { 19 margin-right: 10px; 20 margin-left: 10px; 21 float: left; 22 background-color: #fe9c00; 23 width: 220px; 24 } 25 26 #content { 27 margin-right: 10px; 28 float: right; 29 margin-left: 10px; 30 width: 700px; 31 background-color: #dedede; 32 } 33 34 #footer { 35 margin-right: 10px; 36 margin-left: 10px; 37 clear: both; 38 background-color: #663300; 39 width: 940px; 40 }
这里我们的侧边栏在正文之前，试想一下，在移动端显示时，难道我们会先显示侧边栏再显示正文吗？（侧边栏信息的重要性不及内容）
所以在移动端，我们会优先显示正文，将侧边栏放在正文后面显示。
基于此处考虑，我们将侧边栏与正文互换一个位置：
1 <div id="content"> 2 <p>here is the content</p> 3 </div> 4 <div id="sidebar"> 5 <p>here is the sidebar</p> 6 </div>
互换后，对大屏幕的显示并没有什么影响，因为我们的侧边栏与内容用的是 float:left 和 float:right 属性，但是在 iPad上，则变成了首先显示内容区，下面才是侧边栏。
现在显示顺序已经是比较合理了，我们可以对小屏的内容追加一些样式，让其看起来更加漂亮一点。
三、给小屏添加一些媒体样式
1 @media screen and (max-width: 768px) { 2 #wrapper, 3 #header, 4 #footer, 5 #navigation { 6 width: 768px; 7 margin: 0px; 8 } 9 #logo { 10 text-align: center; 11 } 12 #navigation { 13 text-align: center; 14 background-image: none; 15 border-top-color: #bfbfbf; 16 border-top-style: double; 17 border-top-width: 4px; 18 padding-top: 20px; 19 } 20 #navigation ul li a { 21 background-color: #dedede; 22 line-height: 60px; 23 font-size: 40px; 24 } 25 #content, 26 #sidebar { 27 margin-top: 20px; 28 padding-right: 10px; 29 padding-left: 10px; 30 width: 728px; 31 } 32 .oscarMain { 33 margin-right: 30px; 34 margin-top: 0px; 35 width: 150px; 36 height: 394px; 37 } 38 #sidebar { 39 border-right: none; 40 border-top: 2px solid #e8e8e8; 41 padding-top: 20px; 42 margin-bottom: 20px; 43 } 44 .sideBlock { 45 width: 46%; 46 float: left; 47 } 48 .overHyped { 49 margin-top: 0px; 50 margin-left: 50px; 51 } 52 }
最终效果如下：
看上去很赞，但不要高兴太早，接下来就是见证无奈的时刻。
媒体查询尽其所能，根据设备特性应用了对应的样式。
但问题是，现有的媒体查询只覆盖了小范围的视口。视口宽度小于 768 像素的设备都将
看到内容被剪切，而视口介于 768 像素到 960 像素之间的设备，则会使用未受媒体查询
样式影响的原有样式，结果我们已经知道了，一旦视口宽度小于 960 像素，页面就无法
匹配
如果针对已知的特定访问设备，可以单独使用媒体查询来制作理想的设计效果，我们已
经见过专门适配 iPad 有多简单。但是这种策略有严重的缺陷，换句话说，它不能适应未
来的变化。
我们的设计应该在突变之前保持灵动。要做到这点，需要将呆板的固定布局修改成灵活的流式布局。
