再谈响应式网页设计

评论(16)

前几天写过一篇 《浅谈响应式网页设计可行性》 ,主要探讨了一下个人博客使用响应式网页设计来设计博客解决移动终端访问网站的可行性,提出了建立在移动终端不断发展前提下的另一种响应思路,因为当时接触响应式网页设计理念不久,再加上从移动终端的访问角度去片面的看待这个问题,所以不得不承认上篇文章存在着很大的局限性,更是忽略了该设计思路PC终端浏览的优越性。

最近看到一个不错的响应式网页设计主题,里面有很多的功能实现值得去研究,因为是免费提供的,所以也就下载下来研习研习,也正是在研习中发现了我对响应式网页设计的诸多误解,更有了新的理解,既然有了新的理解,当然还是要撰文记录一下。
在这里推荐一下这个主题:大前端 D4 主题。需要的童鞋 百度一下就可以搜到。

响应分辨率而不是终端

响应不同分辨率的浏览,而不是响应不同浏览终端,也许才是其精髓吧,不得不承认没有去深刻理解前端观察的那篇文章确实给了我很大的误导,让我去片面的理解了响应式网页设计这个概念,看代码:

@media (max-width:1024px){
.post-hot dd{margin-right:18px}
...........
.sticky li{padding-left:0}
...........
.excerpt .time{display:none}
}
@media (max-width:960px){
...........
.sticky li{ padding-bottom:10px;}
...........
}
@media (max-width:640px){
...........
.sticky .time{display:none}/*640以下分辨率的浏览就会隐含*/
...........
}

不多解释,响应不同分辨率精髓在此。

不同分辨率下的表现

640 以下分辨率
该分辨率下,很明显原始页面导航菜单将不被显示,取而代之的是窄屏版的页面导航菜单。

640 以下分辨率

640 以下分辨率

960 – 640 分辨率浏览
这个分辨率下会显示正常的页面导航菜单。

响应式网页 960 - 640 分辨率浏览

响应式网页 960 - 640 分辨率浏览

评论部分表现

响应式网页 评论部分表现

响应式网页 评论部分表现

小分辨率 边栏部分表现

响应式网页 小分辨率 边栏部分表现

响应式网页 小分辨率 边栏部分表现

要考虑的所有分辨率

大前端D4主题没有考虑到 ipad 能达到分辨率以下的终端浏览情况的设置。
所以更小分辨率没有再设置,会出现显示不全,且没有滑动条的现象。

响应式网页 更小分辨率没有再设置

响应式网页 更小分辨率没有再设置

代码区不换行溢出

代码区一般我们都设置不换行,所以调小分辨率显示的时候会有溢出的情况。

不换行溢出

响应式网页 不换行溢出

响应式网页 不换行溢出

不换行溢出情况

响应式网页 不换行溢出情况

响应式网页 不换行溢出情况

响应分辨率的好处

好处显而易见,目前我们设计的被动式的网页,呈现网页内容的前提是用户把窗口调到我们设计理想的大小,而响应式网页设计的好处在于通过不同分辨率调整网页呈现形态,这样我们可以针对不同窗口大小区域分段去设计我们的网页呈现形式,让我们的网页在不同的屏幕分辨率里、不同的窗口大小下一样的美观且易于浏览。

写在最后

在前端这条路上,响应式网页设计只是冰山一角,作为一条菜菜鸟,我还有很多东西要学,虽然不指着这个挣钱,但毕竟是自己选择的爱好,所以要坚持下去,要学好、做好。
现阶段的努力目标是:
努力不让自己的博客做的那么难看。





转载请注明转自: 再谈响应式网页设计

  1. @wind
    用谷歌的搜索是为了降低服务器压力,
    流量小的博客开启这个没有太大意义,
    就是为了炫?
    改善用户体验的话可以效仿一下mg12,
    用自带搜索的前提下,
    将谷歌搜索放到侧边栏,
    做为搜索结果的优化补充,
    inove主题带着谷歌搜索的功能,
    你可以研究下。

  2. @XiangZi
    搜索的问题是变通了下的。我在没有启用谷歌的定制个人的搜索代码时就可以,用了就会出现404错误的页面。这个不知道为啥?还有就是顶部右侧的banner不能添加,添加后会出现页面错位的情况。

  3. @wind
    看到你弄好了,很厉害啊!

  4. 呵呵。拿大前端来开刀

  5. @邓肯
    @陌凡
    主题里很多东西值得我们去借鉴,也花了作者不少心思。
    能够拿出来分享实属不易,我喜欢这家伙的后台设计,
    需要的功能基本上都有了,只要根据用途的不同稍稍改改样式就可以了。
    因为登陆后台基本要求就是IE8所以可以放心的设置一些高级样式,爽啊。

  6. 支持朋友,这个主题很给力

  7. @wind
    应该是缺东西,白天用手机看不了,得晚上回去看,我记得我仿的那版没这个问题的。

  8. xiang兄,有个WP的问题问你下,最近研究mg12的主题,为什么在搜索框里键入我的日志的名字却搜不出来呢?出现的是404的错误页面。为啥?求解。

  9. 大前端很火啊 很多人介绍都不错
    你已经不是菜鸟了 在俺们的眼里 那是高手

  10. Pingback: 浅谈响应式网页设计可行性 | Design - Html

  11. @无冷
    困惑中,要不要研究一下,又疑惑,为什么研究。

  12. 继续加油,多写点好文章让大家学习一下

  13. 响应布局很爽的,但是设计者就不爽了,要计算很多东西啊

  14. @wind
    起码无聊的时候研究一下,可以让自己觉得不是那么空虚,吼吼。
    @ymmcute
    可以考虑合作一下,不过可说好了,我这可是纯粹的个人爱好,跟挣钱没有半毛钱关系啊。

  15. 越来越好看了,今天小于同学还想跟你合作 他打个版呢~ 呵呵 也不知真假!这个小P孩儿!

  16. 爱好可以让生活过的很有情趣