Warning: error_log(/datadisk/wwwroot/mcykj.com/public_html/caches/error_log.php): failed to open stream: Permission denied in /datadisk/wwwroot/mcykj.com/public_html/phpcms/libs/functions/global.func.php on line 464

Warning: error_log(/datadisk/wwwroot/mcykj.com/public_html/caches/error_log.php): failed to open stream: Permission denied in /datadisk/wwwroot/mcykj.com/public_html/phpcms/libs/functions/global.func.php on line 464
响应式网站设计中内容始终优先-梦创义网站建设
×

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

×

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

梦创义官方微信

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

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

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)收集于网络或网友投稿,对于内容系文章作者个人观点,不代表本站观点.我们每日更新最新网站建设教程,网站制作教程,网站建设方案报价等,如果你想了解更多建站知识,请收藏并持续关注我们网站.

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

  • 基于用户创新

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

  • 服务设计思维

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

  • 洞察用户心理

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

  • 查看更多 >>

最新新闻Latest News

婆婆子官方网站正式上线
某某某主要是经营多个全世界的音乐器屏的大背景去展示行业的艺术美。展……
关于华采元创运营面试
搜索
做一个直播app需要多少钱?
视频APP开发是现在最热门的移动应用,那么最值得关注的问题是,开发一……
移动开发 请人开发app大概得多少钱?
app开发的费用主要就是人力成本,而决定人力成本的因素包括
开发一个app开发步骤
一、开发一个app多少钱?个人亲身经历分享: 开发一个app多少钱?几百……
  

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.
京ICP备13003869号-1