中国博客联盟:成员展示导航响应式布局,完善宽度受限的不足(附响应式CSS教程)

前些天在写中国博客联盟第一阶段折腾小记时提到了要做一个公用导航的移动版本,今天中午借着午休的时间就去查了下响应式资料,什么通过JS来判断宽度并切换CSS、通过响应式CSS语法来改变样式等等。

通过结合先用公用导航,仔细分析后,决定采用最容易实现的Media Queries的方法来实现样式的自动切换。以前张戈就制作过互推联盟公用页面的移动CSS样式,所以CSS文件也是现成的,在简单的增加和修改了CSS引入语句后,立竿见影,真的很简单!

至于预览效果,有兴趣的朋友可以点击下面链接,打开页面后拖拽改变浏览器宽度来查看变化:

http://m.zhangge.net/alliance#mobile

或者在不同宽度的页面调用联盟公共导航js也可以查看到响应式效果:

①、当页面宽度大于或等于601px时展示PC端样式

中国博客联盟:成员展示导航响应式布局,完善宽度受限的不足(附响应式CSS教程)

②、当页面宽度大于或等于461px、小于或等于600px时展示移动端样式一

中国博客联盟:成员展示导航响应式布局,完善宽度受限的不足(附响应式CSS教程) ②、当页面宽度小于或等于460px时展示移动端样式二

中国博客联盟:成员展示导航响应式布局,完善宽度受限的不足(附响应式CSS教程)

Ps:移动端样式和PC端样式的区别如下:

<1>、移动版导航中的网站列表为一行3列,PC则为一行5列;

<2>、移动版样式一中取消了申请加入按钮和联盟滚动公告;

<3>、移动版样式二中联盟滚动公告,分类强制显示为2个字,而不是之前诡异的3个字,并隐藏网站图标节省空间

样式则会根据所在页面的宽度自动切换,比额外弄一个移动版页面更省心方便!

最新更新:移动样式一分为二,感谢黄启福博主的建议。


下面附上响应式CSS的相关教程:

Media Queries这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式。 

首先来看一个简单的实例: 

上面的media语句表示的是:当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media的语句中包含的内容:

1、screen:这个不用说大家都知道,指的是一种媒体类型;

2、and:被称为关键词,与其相似的还有not,only,稍后会介绍;

3、(max-width:600px):这个就是媒体特性,说得通俗一点就是媒体条件。

为了更能理解Media Query,我们在次回到前面的实例上:转换成css中的写法为(联盟导航采用的正是这个方法):

其实就是把small.css文件中的样式放在了@media srceen and (max-width;600px){…}的大括号之中。在语句上面的语句结构中,可以看出Media query和css的属性集合很相似,主要区别在:

1、Media query只接受单个的逻辑表达式作为其值,或者没有值;

2、css属性用于声明如何表现页页的信息;而Media Query是一个用于判断输出设备是否满足某种条件的表达式;

3、Media Query其中的大部分接受min/max前缀,用来表示其逻辑关系,表示应用于大于等于或者小于等于某个值的情况

4、CSS属性要求必须有属性值,Media Query可以没有值,因为其表达式返回的只有真或假两种

下面我们一起来看看Media Queries的具体使用方式

一、最大宽度Max Width

上面表示的是:当屏幕大于或等于900px时,将采用big.css样式来渲染Web页面。

二、多个Media Queries使用

Media Query可以结合多个媒体查询,换句话说,一个Media Query可以包含0到多个表达式,表达式又可以包含0到多个关键字,以及一种Media Type。正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。

三、设备屏幕的输出宽度Device Width

上面的代码指的是iphone.css样式适用于最大设备宽度为480px,比如说iPhone上的显示,这里的max-device-width所指的是设备的实际分辨率,也就是指可视面积分辨率我们可以使用media query为android手机在不同分辨率提供特定样式,这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。

四、not关键字

not关键字是用来排除某种制定的媒体类型,换句话来说就是用于排除符合表达式的设备。

五、only关键字

only用来定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有:支持媒体特性(Media Queries)的设备,正常调用样式,此时就当only不存在;对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备,这样就会不读了样式,因为其先读only而不是screen;另外不支持Media Qqueries的浏览器,不论是否支持only,样式都不会被采用。

六、其他

在Media Query中如果没有明确指定Media Type,那么其默认为all,如:

另外还有使用逗号(,)被用来表示并列或者表示或,如下

上面代码中style.css样式被用在宽度小于或等于480px的手持设备上,或者被用于屏幕宽度大于或等于960px的设备上。

关于Media Query的使用这一节就介绍到此,最后总体规纳一下其功能,个人认为就是一句话:Media Queries能在不同的条件下使用不同的样式,使用页面达到不同的渲染效果。

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

刷新评论

目前评论:44   其中:访客  32   博主  11

  1. oldcheetah 3 来自天朝的朋友 未知浏览器 Unknow Os 黑龙江省哈尔滨市 联通

    辛苦辛苦,回去拿移动设备试试。

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      评论” />

  2. 糯米汇 5 来自天朝的朋友 未知浏览器 Unknow Os 四川省成都市 广电网

    支持下,等会换成移动样式的试试

  3. 夏日博客 5 来自天朝的朋友 未知浏览器 Unknow Os 北京市 宽带通

    支持你的博客联盟。。再接再厉。。

  4. 噶里味美食网 3 来自天朝的朋友 未知浏览器 Unknow Os 上海市 电信

    越来越完善了,加油~

  5. yedward 4 来自天朝的朋友 未知浏览器 Unknow Os 安徽省合肥市庐江县 电信

    有时候我用手机打开的时候,那个js还是调用的乱七八糟,也不知道怎么回事。

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      可能是缓存问题,手机浏览器缓存保存的更久。。

  6. PHP二次开发 6 来自天朝的朋友 未知浏览器 Unknow Os 山东省济南市 联通

    我一直在想,我博客是不是也放一下。

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      放留言板感觉应该会不错~

    • 迷你博客 4 来自天朝的朋友 未知浏览器 Unknow Os 广东省广州市 电信

      我的是单独开一个下拉栏目和关于页面放在一起的。

  7. 社保查询 0 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

    大爱 能有这份功夫折腾 算是很给力了 我以前想过要弄这样的网站 后面没空就去了这个念头 现在你弄了也不错 把相关博客整合起来

  8. 牛仔搭配 1 来自天朝的朋友 未知浏览器 Unknow Os 江苏省苏州市 电信

    活着就是为了折腾! 评论” />

  9. 香港云主机 2 来自天朝的朋友 未知浏览器 Unknow Os 重庆市 电信

    中国博客还是不错的!

  10. 球球 4 来自天朝的朋友 未知浏览器 Unknow Os 四川省成都市 电信

    越来越热闹了啊

  11. 清心涟漪 1 来自天朝的朋友 未知浏览器 Unknow Os 广东省广州市 联通

    博客联盟的友链全部都要重新添加吗?为什么我博客的链接在分类下面没了。

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      http://zgboke.com 启用了独立站点,去重新提交下。

  12. 梦轩丽人 6 来自天朝的朋友 未知浏览器 Unknow Os 广西南宁市 电信

    不错,看了几张图片,效果看起来都挺好的,厉害!

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      提建议的朋友不少,看来还需要改善~太折腾人了。

  13. 瑾瑜 4 来自天朝的朋友 未知浏览器 Unknow Os 安徽省合肥市 中国科学技术大学

    感觉还需要优化,显得有点拥挤,分类的标题会显示不全。毕竟手机浏览器显示页面时不按照屏幕分辨率,等效宽度可能400多px。

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      感谢你的建议,已做优化,当宽度窄到变成3个字的时候,强制隐藏成2个字,目前大致响应宽度范围是:*~460px 样式1,461px~600px样式2,601px~* 样式3,后续有问题再继续跟进,欢迎提交任何意见或建议。 评论” />

      • 瑾瑜 4 来自天朝的朋友 未知浏览器 Unknow Os 安徽省合肥市 中国科学技术大学

        感觉很窄时可以隐藏图标,否则乱乱的……

        • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

          评论” />感觉还行。

          • 瑾瑜 4 来自天朝的朋友 未知浏览器 Unknow Os 安徽省合肥市 中国科学技术大学

            嗯,刚才手机查看时个别博客名空白,只有一个图标了。如果overflow以后不允许换行,显示前几个文字就可以了,否则就应该先隐藏图标,再隐藏文字。

            • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

              还是改了下,宽带小于460隐藏图标。

  14. 小桃泳衣旗舰店 2 来自天朝的朋友 未知浏览器 Unknow Os 辽宁省丹东市 联通

    不折腾不出成绩啊http://www.xiaotaoyongyi.com/

  15. 大师兄 2 来自天朝的朋友 未知浏览器 Unknow Os 北京市 电信通

    张戈技术越来越厉害啦~ 评论” />

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      没事瞎折腾。。

  16. 糯米汇 5 来自天朝的朋友 未知浏览器 Unknow Os 四川省巴中市 电信

    有感觉,这几天手机访问有变化的

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      天天在做样式微调。

      • 糯米汇 5 来自天朝的朋友 未知浏览器 Unknow Os 四川省成都市 广电网

        看到了联盟一天一天壮大!

  17. 香港虚拟主机 3 来自天朝的朋友 未知浏览器 Unknow Os 重庆市 电信

    明显觉得第一种感觉比较好

  18. 碧海神风 3 来自天朝的朋友 未知浏览器 Unknow Os 海南省海口市 电信

    继续支持~~~

  19. MOREOPEN 6 来自天朝的朋友 未知浏览器 Unknow Os 上海市 电信

    现在这老大的技术越来越好了啊,我之前前几天才把调用的js改了,一直忘了

  20. 源泉 1 来自天朝的朋友 未知浏览器 Unknow Os 上海市 铁通

    多段支持!

  21. 免费部落 3 来自天朝的朋友 未知浏览器 Unknow Os 天津市 联通

    这个效果不错哦!

  22. Applehater果黑 4 来自天朝的朋友 未知浏览器 Unknow Os 广东省广州市 联通

    我是来学习哒哒哒

  23. 常乐猫blog.clmao.com 5 来自天朝的朋友 未知浏览器 Unknow Os 广西北海市 电信

    牛膝的

  24. 2 来自天朝的朋友 未知浏览器 Unknow Os 上海市 电信

    技术大牛、、、

  25. 360社团 4 来自天朝的朋友 未知浏览器 Unknow Os 山西省太原市 电信

    看着就头疼,在一个一个去整合这些个代码。。。

  26. 球球 4 来自天朝的朋友 未知浏览器 Unknow Os 陕西省宝鸡市 电信

    这样坚持不容易啊

  27. 水凝含香 1 来自天朝的朋友 未知浏览器 Unknow Os 江苏省南京市 联通

  28. 一昕精选 3 来自天朝的朋友 谷歌浏览器 Windows 8 山东省青岛市 奇虎360科技联通CDN节点

    不得不说,这个博客联盟真的很有创意啊

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 8.1 广西贵港市 奇虎360科技电信CDN节点

      欢迎加入~

加载中,请稍候...