响应式Web设计：使用HTML5和CSS3实践 （5）

look_w

5. 响应式设计中内容始终优先

一个设计原则是，尽可能在多平台多视口下保留尽可能多的内容，而不是使用display:none等类似的方法来隐藏部分内容。同时你要意识到内容顺序的重要性，目前页面中侧边栏和主内容区的顺序决定了侧边栏会显示在主内容区前面，在窄视口设备下，用户先看到主内容再看到侧边栏显然更加合理。因此我们将#content和#siderbar进行互换。虽然标签换了位置，但页面在大视口下没有变化，但是在iPad上变成了首先显示主内容区，下面才是侧边栏。

在调整好标签位置以后，我们还可以追加一些样式，使在iPad上的显示更加美观。

    @media screen and (max-width: 768px) {
        #wrapper,#header,#footer,#navigation {
            width: 768px;
            margin: 0px;
        }
        #logo {
            text-align:center;
        }
        #navigation {
           text-align: center;
           background-image: none;
           border-top-color: #bfbfbf;
           border-top-style: double;
           border-top-width: 4px;
           padding-top: 20px;
       }
        #navigation ul li a {
            background-color: #dedede;
            line-height: 60px;
            font-size: 40px;
        }
        #content, #sidebar {
            margin-top: 20px;
            padding-right: 10px;
            padding-left: 10px;
            width: 728px;
        }
        .oscarMain {
            margin-right: 30px;
            margin-top: 0px;
            width: 150px;
            height: 394px;
        }
        #sidebar {
            border-right: none;
            border-top: 2px solid #e8e8e8;
            padding-top: 20px;
            margin-bottom: 20px;
        }
        .sideBlock {
            width: 46%;
            float: left;
        }
        .overHyped {
            margin-top: 0px;
            margin-left: 50px;
        }
    }

6. 媒体查询只是响应式开发的必要条件之一

尽管我们针对iPad上做了媒体查询和样式设置，网站在低分辨率上的iPhone的视口上显示的仍旧很糟糕。我们虽然使用媒体查询对视口宽度小于768像素应用了样式，但是介于768到960像素之间的设备，则没有对应的媒体查询代码，内容因此会被剪切掉。

目前的情形是，我们针对特定的断点设置了媒体查询然后使布局发生变化，但是捕捉到下一个视口断点之前，页面静止不变。我们需要更好的策略，能够在断点导致的效果突变之前保持伸缩。如何做到这点，正是下一章的内容：将呆板的固定布局修改成灵活的流动布局。