欢迎光临!中国网页设计提供最新的免费网页制作教程,网页设计技术,HTML5+DIV3...中国站长必上的网站。
加入收藏设为首页广告合作
您当前位置:网站首页 >> 网页制作 >> 网页布局 >> 响应式设计如何入门
  • 网页配色
  • 网页布局
  • 设计欣赏
  • 网页设计理论
  • HTML/HTML5
  • CSS
  • Javascript
  • Dreamweaver
  • FLASH
  • 响应式设计如何入门

    来源:互联网 浏览:2637

    内容提要:笔者边学边用响应式设计,在本文中分享了自己的心得。包括入门技术——Media Query 和 Viewport,入门设计——策略与流程,进阶技术,进阶设计,高阶技术,还推荐了不错的参考图书和文章。

    我最近也在边学边用响应式设计。这里总结一下自己的心得。

    1. 基本概念:

    响应式设计(以下称 RWD )是一种设计思维方式,而不是某种特定的技术。我理解的响应式设计,就是让 Web 内容的呈现从手机到27寸 iMac 都保持最佳使用体验。一开始接触 RWD 的时候,感觉它关注的都是移动端,实际上大屏幕以及高分屏也属于 RWD 需要在设计或技术层面考量的要素。

    2. 入门技术——Media Query 和 Viewport:

    第一次接触 RWD ,是看了 A List Apart 的这篇经典文章:Responsive Web Design · An A List Apart Article 。当时还不能领会 RWD 对网页设计趋势的影响,只是从技术层面了解到,在 CSS 中可以通过 Media Query 为不同媒介订制不同样式。后来为 iPhone 做微信分享页面,又学习了 Viewport 的概念及其在 iOS 系统上的应用。关于 Viewport,可以学习 Apple 的官方文档:http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

    3. 入门设计——策略与流程:

    会在 CSS 和 HTML 中使用 Media Query 和 Viewport,并不代表会响应式设计。看国外的文章,讨论的核心也从纯技术实现转向到设计策略。Luke Wroblewski 提出过 Mobile First (http://www.lukew.com/ff/entry.asp?933)。这在 Mobile Web 爆发早期确实是挺有先见的,不过现在看来还是过于极端了。毕竟网页内容的大部分消费者还在使用 Lap/Desk-top,而每个网站的消费人群不同,策略也应该有所区别。BTW,不知道 Mashable 去年底推出的糟糕改版是不是 Mobile First 理念的产物。反正页面宽过 960px 时,根本没法看……

    关于设计策略、设计流程,我自己的实践经验比较少,只能说具体问题具体分析。

    以下一篇文章和一个信息图可以作为阅读资料:
    Design Process In The Responsive Age
    The Sparkbox Responsive Design Process

    ————分割线——————以下是我想学但是还没掌握的——————分割线————

    4. 进阶技术:

    用 Sass/Less 订制一款属于自己的 Responsive CSS Framework
    24 ways: Adaptive Images for Responsive Designs… Again
    浏览器兼容(不含IE6、7)

    5. 进阶设计:

    Responsive Typography: The Basics

    6. 高阶技术:

    刚刚在知乎查看“响应式设计”话题,发现@张克军 对 响应式设计应该会是今后的趋势,对前端的要求也将越来越高,你觉得呢?的答案。

    我觉得非常有意思。引用他的话:

    RWD不能是桌面版叠加适配代码,这样页面体积反而变大,在小屏幕里看到的实际上是一个更笨重的页面,性能只能比桌面版还差。同时手机浏览器的事件模型跟桌面浏览器的差异很大,意味一些交互也会不work。这样的结果无法让人接受。

    他给出的方案从页面模板的层面实现 RWD。我现在还没有使用模板框架的经验,以后会尝试学习一下。

    以上,浅薄的分享自己目前所知,以期学到更多。欢迎大家指正、补充或分享你们的入门方法。

    发表评论 共有0人对本文发表评论
    网名:
    评论:
    验证:
    (网友评论仅供表达个人看法,并不表明本站同意其观点或证实其描述)
    联系我们 - 网站调查 - 免责声明 - 站长简介 - 站点综合查询 - 课件习题 - 友情链接 - 站长统计