当前位置: 首页 > 设计 > 正文
avatar

目前很多设计已经开始完全的自适应设计了,就是随着分辨率的不断变化,设计就呈现不一样的展示效果,这种被成为“自适应网页设计”,也叫“响应式网页设计”。我个人不是很喜欢这种完全自适应的设计,我更加倾向于某一段分辨率用一个样式,在这个分辨率比例之间的,都是一样的展示。

随着现在浏览器越来越多,分辨率越来越大,一些朋友跟我反馈说主题在他家大分辨率的电脑上面看着好小,能不能如果能支持大分辨率主题就好了。

目前很多设计已经开始完全的自适应设计了,就是随着分辨率的不断变化,设计就呈现不一样的展示效果,这种被成为“自适应网页设计”,也叫“响应式网页设计”。我个人不是很喜欢这种完全自适应的设计,我更加倾向于某一段分辨率用一个样式,在这个分辨率比例之间的,都是一样的展示。

然后我就仔细看了下博客访问的浏览器及分辨率,然后发现确实需要设计一套使用大分辨率的主题。

浏览器、分辨率比例

浏览器中谷歌浏览器+火狐浏览器就达到了60%,谷歌浏览器基本就占到了半壁江山。记得2012年末总结的时候谷歌浏览器是41.4%,现在都48%了。估算下来新式浏览器+IE9+IE10+有Chrome核的国内浏览器比例应该超过75%了。

分辨率,如果我们说1024是标准的分割线的话,那么大分辨率的比例接近90%,超过1028的占到85%以上。

这也使得原本990px的设计不再那么科学了,研究了一些网站,目前大分辨率下用的基本算是1190px。

于是花了十分钟的时间,调整了下宽度,应该使用新式浏览器的同学看到的应该是1190px宽度的主题了。其实使用了基础的CSS3 Media Queries,算是提前先感受下,不过这类简单线条型的主题改起来也还可以,不会难看,虽然粗犷了点。

本来想兼容下IE8及其更低版本的,不过加载了那个css3-mediaqueries.js之后发现效率貌似受到了点影响,同时导航也有点问题,索性就去掉了,必将我博客访问用户还是新式浏览器的用户居多的。

之前准备写一个手机主题的,写了一小半了,目前还在用着,可以用手机打开我博客试试,其实我准备写一个类似app效果的一个手机主题,左右展开,瀑布流加载,不过写了一半之后发现,在我iphone上面还可以,在一些安卓手机上打开之后,很卡,这让我很伤心,就这样荒废在那边了,最近在学习这个CSS3 media,准备还是用这种方式来定义一个主题,支持手机竖版,横版,ipad版等等,同时准备折腾下Retina(视网膜)屏幕的Web表现。

貌似还是有点小压力啊。come on!

本文固定链接: http://www.weisay.com/blog/think-of-responsive-web-design.html | 威言威语

响应式网页设计的思考:目前有51 条评论

  1. avatar
    30楼
    西门 Google Chrome Mac OS

    现在真是笔记本的天下,1366*768太猛了

    2014-01-29 16:08 [回复]
    • avatar
      William Mozilla Firefox Windows

      主要是现在出的笔记本大多都是1366*768的分辨率,我的笔记本是1280*800的,看来是很老了。

      2014-02-10 14:45 [回复]
  2. avatar
    29楼
    超級efly Google Chrome Mac OS

    Weisey Simple 支不支持? :?: :?:

    2014-01-02 22:36 [回复]
  3. avatar
    28楼
    Youth.霖 UC浏览器  Android 4.1.2 HUAWEI G520-5000 Build/HuaweiG520-5000

    膜拜大神……

    2013-12-15 22:49 [回复]
  4. avatar
    27楼
    天津SEO Google Chrome Windows

    看你的网站的一般都搞技术滴 当然大多人都是chrome+firefox 哈哈

    2013-11-18 09:39 [回复]
    • avatar
      William Mozilla Firefox Windows

      恩啊,所有就可以考虑多一些前端特色的东西出来。

      2013-11-18 22:34 [回复]
  5. avatar
    26楼
    一只羊博客 Google Chrome Windows

    威哥,文章中用的什么统计工具?显示这么详细还有分辨率和浏览器。求推荐

    2013-10-15 13:00 [回复]
    • avatar
      William Mozilla Firefox Windows

      就用的百度统计啊 :wink:

      2013-10-15 13:11 [回复]
  6. avatar
    25楼
    张培洋 Mozilla Firefox Windows

    支持火狐、chrome!

    2013-10-13 21:15 [回复]
  7. avatar
    24楼
    沃默博客 Google Chrome Windows

    大分辨率是潮流~~~

    2013-10-11 08:34 [回复]
  8. avatar
    23楼
    甜菜 搜狗浏览器 Windows

    这主题都上了一年多了求公开!!! :cool:

    2013-10-10 20:01 [回复]
  9. avatar
    22楼
    xilouqingzhu Internet Explorer Windows

    俺只会设置成绝对的宽屏… :cry:

    2013-10-10 19:18 [回复]
  10. avatar
    21楼
    美女优优 Mozilla Firefox Windows

    现在做站自然要支持响应式了。手机,pad等占据了很大比例哦。比如我的优优网事就是响应式的设计,手机和pad上访问都能完美呈现。

    2013-10-08 16:03 [回复]
  11. avatar
    20楼
    草根成春 Google Chrome Windows

    威哥,你的博客什么时候也成了姨妈博客了啊!

    2013-10-08 12:37 [回复]
  12. avatar
    19楼
    张培洋 Google Chrome Windows

    来支持下,哥们!

    2013-10-05 20:27 [回复]
  13. avatar
    18楼
    浅色时光 Google Chrome Windows

    我想知道博主的评论是插件实现还是什么,挺喜欢这个辨别浏览器和系统的功能的,能否发我?592399938@qq.com

    2013-10-03 15:03 [回复]
  14. avatar
    17楼
    阿哲 Safari iPad

    突然发现威哥更新了ipad的主题了〜非常棒啊,手机横版竖版都响应式了,求共享啊。

    2013-09-30 14:21 [回复]
    • avatar
      William Mozilla Firefox Windows

      国庆前刚刚调整了一下,冗余代码还比较多,近期还要再优化一下

      2013-10-08 11:10 [回复]
      • 手机访问效果不错呢,类app,响应式,现在手机主题很少呢,能不能共享下啊

        2013-10-10 07:43 [回复]
        • avatar
          William 2345智能浏览器 Windows

          还没有完全完工呢 :???:

          2013-10-10 11:54 [回复]
          • avatar
            longlona UC浏览器  Android 2.3.7 HTC HD2 Build/MIUI

            嗯,期待啊!威哥很威武啊,以前用过好多博客系统,都有你的身影,pj,现在刚开始wordpress,共享了好多优秀主题,插件,真非常赞叹,

            2013-10-11 10:47 [回复]
  15. avatar
    16楼
    王叨叨 Google Chrome Windows

    我主题设置的最大分辨率是1280的,这个现在应该是比较居中的了。

    2013-09-29 11:13 [回复]
    • avatar
      William Mozilla Firefox Windows

      你的主题win8风格,颜色变化太多看着还是有点压力的

      2013-09-30 22:11 [回复]
  16. avatar
    15楼
    超級efly Google Chrome Mac OS

    另外鼠標滑倒頭像上旋轉的特效是如何實現的?我只看過多說的。。。

    2013-09-26 21:18 [回复]
    • avatar
      z Netscape Navigator Windows

      CSS3吧

      2013-09-29 09:36 [回复]
      • 我只找到多說的,有沒有普通評論框適用的?

        2013-09-29 20:16 [回复]
        • avatar
          William Mozilla Firefox Windows

          我主题css里面ol.commentlist li div.vcard img.avatar和ol.commentlist li div.vcard img.avatar:hover 两段复制到你的css应该就行了

          2013-09-30 22:15 [回复]
  17. avatar
    14楼
    超級efly Google Chrome Mac OS

    Weisey Simple 支不支持?

    2013-09-26 21:06 [回复]
  18. avatar
    13楼
    点点滴滴 Internet Explorer Windows

    1024*768的分辨率不多了。。

    2013-09-23 23:51 [回复]
  19. avatar
    12楼
    怎样网 Google Chrome Windows

    我貌似非主流了…分辨率1280X800,浏览器chrome

    2013-09-23 20:56 [回复]
    • avatar
      William Mozilla Firefox Windows

      旧一些笔记本都是1280*800的,目前行的笔记本大多是1366*768的

      2013-09-25 13:44 [回复]
  20. avatar
    11楼
    Louis Han Mozilla Firefox Windows

    这么高的分辨率 并不一定要全屏开个浏览器啊

    2013-09-23 01:30 [回复]
    • avatar
      William Mozilla Firefox Windows

      嗯啊,不过用全屏的还是占绝大多数的,响应式么就是你不全屏就用另一种样式了。

      2013-09-23 14:22 [回复]
  21. avatar
    10楼
    水缘泡泡 Google Chrome Windows

    我也整成宽屏了! :eek:

    2013-09-22 16:18 [回复]
    • avatar
      William Mozilla Firefox Windows

      你这个是给绝对设置成宽屏的啦,我这个1024下还是原来的版本

      2013-09-23 14:21 [回复]
  22. avatar
    9楼
    那时年少 Mozilla Firefox Windows

    现在基本都是响应式设计,看了这个把自己主题改了下宽屏 :cool:

    2013-09-22 15:59 [回复]
  23. avatar
    8楼
    毕扬 Google Chrome Windows

    加油

    2013-09-22 09:21 [回复]
  24. avatar
    7楼
    wmtimes Google Chrome Windows

    响应式设计过一个。不过很久了。最近没考虑这事。

    2013-09-20 23:40 [回复]
    • avatar
      William Mozilla Firefox Windows

      最近忙些什么啊

      2013-09-23 14:21 [回复]
      • avatar
        wmtimes Google Chrome Windows

        也没忙啥,但为什么我感觉很忙呢。

        2013-10-06 17:04 [回复]
  25. avatar
    6楼
    Soar、毅 Google Chrome Windows

    如果100%宽度的网页在某些超大屏的显示器上,看文章的话,得一遍又一遍的摇头……

    2013-09-20 20:48 [回复]
    • avatar
      William Mozilla Firefox Windows

      那个肯定会有最大宽度限制的,正常情况下是1190px,所以某些完全自适应的看着也累,失去了自适应优点了。

      2013-09-22 11:25 [回复]
  26. avatar
    5楼
    315g小说 Maxthon Windows

    大势所趋!

    2013-09-20 19:39 [回复]
  27. avatar
    4楼
    草根成春 Internet Explorer Windows

    支持威哥,期待你更好的作品! :?: :cool:

    2013-09-20 14:16 [回复]
  28. avatar
    地板
    佐仔 Google Chrome Windows

    weisay box主题非常喜欢,可惜楼主没有公开发布….我等.

    2013-09-19 14:01 [回复]
  29. avatar
    板凳
    于江水 Google Chrome Windows

    响应式确实很不错,一个站点,任何设备都可以使用。但是我越来越觉得这并不是一个非常好的选择。就像文中说的在 iPhone 中可以用,在一些低端的安卓设备上会很卡。响应式设计,一切都是基于桌面版的,所以桌面版的图片、JS、CSS 都需要在手机端加载,只不过被隐藏掉了,所以会很慢很卡。

    当然,文中那个卡,是因为新建的手机主题用了太多 Js 和 CSS3 效果。

    目前的项目开发中,如果可以选择,我更倾向于响应式(应对所有设备,后备选项)+手机专版(专门为手机等设备,单独做一个去掉很多没有必要的东西的版本)。然后用诸如 wptouch 这类的插件,尽可能的判断出手机设备来。

    如果没有判断出来,也可以有后备的响应式勉强应付。此外,还需要尽可能的添加禁用响应式的按钮,可以让访问者自己选择是否访问响应式版的页面。

    个人愚见。

    2013-09-19 10:25 [回复]
    • avatar
      William Mozilla Firefox Windows

      恩,数的很好,对于响应式这种模式我也是持保守的态度,不做绝对相应,做相对相应可能更好一些。

      2013-09-20 13:46 [回复]
  30. avatar
    沙发
    Capbone Safari iPhone

    你现在这个主题已经是自适应了啊,手机访问没法缩放了

    2013-09-19 01:36 [回复]
    • avatar
      William Safari iPhone

      目前PC版访问算是能做一些自适应了,手机版还是用的单独的设计,准备后期整合一下。

      2013-09-19 13:28 [回复]

发表评论

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter