×

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

×

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

梦创义官方微信

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

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

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看了看页面的效果……


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

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

  • 基于用户创新

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

  • 服务设计思维

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

  • 洞察用户心理

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

  • 查看更多 >>

最新新闻Latest News

网站建设案例,厦门网站制作简介
我们在接触到的厦门网站制作,大型网站建设中常常被几个概念名词:模板……
山东网站建设,请向这里看齐
我们从架构的方面去看问题,实现语言方面并不是问题,语言的优势在于实……
长沙网站制作,多年经验之谈
从事长沙网站制作行业已经12年了,获得了许多网站建设心得。经历了很多……
辽宁省建设厅网站,只需这五步
随着互联网时代的线上线下模式的疯狂来袭,各行业争相建立自己的网络营……
承德网站建设,方案的具体内容
我们在接触到的承德网站建设中常常被几个概念名词:模板网站建设,定制……
  

ABOUT US

北京梦创义科技有限公司成立于2012年
创始人以及初创团队成员均来自各大互联网公司
目前公司拥有员工近百人  平均3年以上从业经验
核心团队成员均有10年以上互联网从业经验

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.