响应式网站设计中内容始终优先

    我们想让网站设计在多平台多视口的情况下保留尽可能多的内容(而不是使用display:none或类似方法来隐藏部分内容)，但也要意识到内容模块显示顺序的重要性。目前，页面中侧边栏和主内容区标签的顺序决定了侧边栏会显示在主内容区前面。显然，窄视口设备的用户应该先看到主内容，而后再看到侧边栏。

    我们还可以(或许应该)将内容区移到导航区域之上。这样那些使用小视口设备的用户就可以先看到主内容。这样无疑是坚决贯彻“内容优先”原则的合理做法。但是，多数情况下每个页面顶部还是应该有导航区，所以我乐得只将HTML代码中的侧边栏和内容区位置互换一下，让内容区出现在侧边栏之前。当前代码结构如下:

here is the sidebar

here is the content

互换位置后的代码如下：

here is the content

here is the sidebar

虽然我们互换了标签位置，但页面在大视口中的显示效果没有变化，因为侧边栏和内容区分别使用了float:left和float:right属性。但是在iPad上，则变成了首先显示内容区，下面才是侧边栏。

在调整好标签结构的顺序之后，我还着手为768像素宽的视口追加并替换了一些样式。现在最新的媒体查询代码如下所示:

@media screen and (max){

#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: 0;

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: 0;

margin-left: 50px;

}

}

此处添加的代码只会对视口等于或小于768像素的显示屏设备起作用。视口更宽的设备会忽略这些代码。另外，因为这些样式放在文件的末尾，所以会覆盖之前的重名样式。

不消说，我们没准备拿什么设计大奖。但仅通过儿行CSS媒体查询代码，就为不同的视口做出一个完全不同的布局来，这还是挺牛的。这些代码都是什么意思呢?

首先，使用媒体查询将所有内容区宽度置为全屏;

#wrapper,#header,#footer,#navigation{

width: 768px;

margin: 0;

}

然后是一些美化页面元素及布局的样式。例如，如下代码片段改变了导航区大小、布局

以及背景，这样平板用户可以更方便地选择导航条目:

#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;

}

现在，同样的内容可以根据视口大小以不同的布局来显示了。媒体查询很赞，不是吗?

太值得庆祝一下了。当你开香槟的时候，我用iPhone看了看页面的效果……

本文由梦创义网站建设(www.mcykj.com)收集于网络或网友投稿,对于内容系文章作者个人观点,不代表本站观点.我们每日更新最新网站建设教程,网站制作教程,网站建设方案报价等,如果你想了解更多建站知识,请收藏并持续关注我们网站.

本文地址：https://www.mcykj.com/show-19-263-1.html转载请注明出处！