×

打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮

×

打开微信“扫一扫”,关注我们官方微信^_^

梦创义官方微信

首页 > 新闻 > 网页设计 > 响应式网站设计中内容始终优先

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

2015-07-271022分享

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

    我们想让网站设计在多平台多视口的情况下保留尽可能多的内容(而不是使用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看了看页面的效果……


  • 基于用户创新

    界面设计日新月异,梦创义坚持基于用户需求的界面创新设计……

  • 服务设计思维

    互联网的格局发生的改变,在我们进行设计服务时更是考虑不同用户、不同……

  • 洞察用户心理

    洞察用户有意识和无意识的行为以及心理特征通过构造一系列的服务来促进……

  • 查看更多 >>

最新新闻Latest News

解读网站结构对收录有什么影响?
这个网站建设市场里,一些企业的网站并不重视网站的内容结构。像内容标……
细谈网建中需注意的一些错误
建一个什么样的网站,是能帮企业来获得成功?对于网站的搭建,这里面是……
建站时需准备什么材料
建一个什么样的网站,是能帮企业来获得成功?对于网站的搭建,这里面是……
提高营销型网站PR值的方法是什么?
就在制作网站时有一个工作重点,便是来快速提高网站的PR值。当然来做营……
静态网页设计的一些特点
网页可以分为静态页面与动态页面两种,但如想网站有很好的排名,也被搜……


ABOUT US

北京梦创义科技有限公司是中国网络新生代的杰出代表。
MCY是由从事多年互联网界研究的海外归国人员于2007年创办,由国内丰富经验的网络工程师与国内外的知名设计师组成,立足北京。

Contact information

手机:13910811300
电话:010-52661970
传真:010-82694569

网址:www.mcykj.com
邮箱:13910811300@126.com
朝阳一部:朝阳区紫芳路九号院广顺园2号楼2605A
海淀二部:回龙观黄平路19号院泰华龙旗广场E座1212室(距西三旗桥2公里,8号线育新站海淀昌平交界)

北京梦创义网站建设的logo

Copyright 2008 ASAweb company. All rights reserved.