这篇文章是对以往发表在Smashing Magazine上关于响应式Web设计的文章的集合,所选出的文章都是最有用最受大家欢迎的,下面就请大家来看看吧。
概览
响应式 Web设计的概念及用法
现 在几乎是每出现一个客户端,就会要求有网站有一个适用于它的移动端版本。这是有实际需求的:你得为BlackBerry设计一个移动端版本,得为 iPhone设计一个移动端版本,得为iPad、netbook、Kindle都设计一个移动端版本——所有这些屏幕的分辨率还必须是兼容的。在未来的五 年内,我们很可能要为新出现的产品设计出移动端版本。这实在是件让人抓狂的事情。新产品的出现是一种必然,那么,不断去进行新的设计也必须是一种必然吗?
在 Web设计和开发领域,我们很快就会发现,要跟上新产品出现的速度,是很难做到的。对于很多站点来说,根本不可能为每一个有着新分辨率的新产品设计一个移 动端版本。那么,我们真的是鱼和熊掌不可兼得,必须舍弃用某种设备的用户换来使用另外一种设备的用户吗?或者还有新的方法?
如何应对 Media Queries不受支持的情况
Media queries是Ethan Marcotte实现响应式设计的第三大支柱。要是没有media queries,流体布局(fluid layouts)将会很难适应各种屏幕分辨率的多变需求。Fluid layouts在小的移动端设备上可能让内容显得拥挤而难以阅读,而在大屏幕上又会显得过大而笨重。Media queries让我们可以使字体适应用户设备的屏幕大小及分辨率,打造最为完美的阅读体验。
CSS3 media queries包含浏览器width变量,受到现在大多数浏览器的支持。但是,缺乏支持的移动端和桌面端浏览器只能提供给用户一个欠佳体验,除非我们能采取一些措施。本文介绍了一些可以用来解决这个问题的一些技术供开发者参考。
响应式Web设计的技术、工具及策略
还在11月的时候,Smashing Magazine上就发布了一篇名为“响应式设计的概念及用法 ”的文章。现在,响应式设计获得了更多关注,但是考虑到它和传统的网站设计技术有很大不同,对于还没有尝试过响应式web设计的设计人员来说,它还是让人觉得困难。
考虑到这一点,在这篇文章中汇编了一些响应式设计的资料,其中包括教程、技术文章、工具和其他一些东西,所有这些资料都是为了让你能获得关于创建响应式设计的详细知识。
如何使用CSS3 Media Queries 来为你的网站创建一个移动端版本
CSS3 一直以来都是让人又爱又恨。它给设计带来无限可能,能解决很多问题,但它在IE8中却得不到支持。这篇文字将会向你展示使用不受IE8支持的CSS3的技 术。然而,即使它不受IE8支持也没有很大关系,因为在它应用最广的地方,也就是移动设备上(如iPhone、Android设备),它还是得到了很多支 持的。
在
这篇文章中,将会展示如何只用少量CSS规则就可以创建一个站点的iPhone版本。文章中将会展示一个简单的例子,还会讲解向一个站点添加一个针对小屏
幕设备的样式表(stylesheet)的过程,这个过程将会显示,为已有网站添加针对移动端设备的样式表是非常容易的。
阅读全文:
原文链接:Responsive Web Design Guidelines and Tutorials
发表评论
-
投身移动开发必须知道的20件事
2012-03-01 23:42 712移动开发需要具体的设计考虑。这个所指的范围非常广,可以从“ ... -
聘用NodeJS开发者的六个建议
2012-03-01 23:41 787假设你正想聘用一名Node ... -
[摘要]Vision Mobile发布2012跨平台开发工具报告 PhoneGap最受欢迎
2012-03-01 23:41 868国外知名调查分析机构V ... -
Facebook发力Mobile Web 推出支付和测试工具
2012-02-28 23:49 786Facebook入场了,在MWC大 ... -
【数据】《移动优先》作者:为什么移动如此重要?
2012-02-28 23:48 896三 年前,前雅虎用户体验总监Luke Wrobl ... -
重新审视Mobile Web
2012-02-28 23:48 661作者简介:Byron是一个 ... -
WebAppTrend周刊:Google Chrome工程师推出Web App开发指南
2012-02-26 00:52 1176从本周起,WebAppTrend将精选一周内(2月20日~2月 ... -
Google Web App开发指南第四章:构建优秀的Web Apps
2012-02-24 23:13 1243构建漂亮的应用 一个web app 的视觉设计不仅 ... -
零基础学习Sencha Touch(资料和教程集合)
2012-02-23 00:41 1248译者注:本篇文章为开发者提供了零基础使用Sencha To ... -
Google Web Apps开发指南之项目样例(上)
2012-02-23 00:41 892如果缺少项目案例部 ... -
如何一步一步制作出高品质Infographic?
2012-02-20 21:23 943译者注:Infographic就 ... -
海豚浏览器CTO刘铁锋:Mobile Web App发展现状及展望
2012-02-18 00:10 845在计算机的发展过程中 ... -
海豚浏览器CTO刘铁锋:Mobile Web App发展现状及展望
2012-02-18 00:09 0在计算机的发展过程中 ... -
新手必读:PhoneGap入门六大问题
2012-02-18 00:08 985很多PhoneGap新手总是需要一些基础问题的解答,Ado ... -
Google Web App开发指南第一章:什么是Web Apps?
2012-02-18 00:07 880很多人向我问起学习HTML5技术的权威入门资料,我总是毫不 ... -
Lanyrd是如何应用HTML5创建出优秀的移动Web应用的
2012-02-15 00:28 613当很多人都在等待观望 ... -
Appcelerator收购Cocoafish,旨在为Titanium平台提供即时移动云服务
2012-02-15 00:17 875译者注:Appcelerator是 ... -
Android官方文档之Web Apps最佳实践
2012-02-15 00:14 642为移动设备开发web页面或者web应用与为桌面浏览器开发web ... -
Android官方文档之Web Apps调试
2012-02-15 00:13 881概览 你可以使用控制台的Javascript方法调试你的w ... -
Android官方文档在WebView中构建Web Apps
2012-02-15 00:13 767概览 在你的Android应用布局中使用 WebView ...
相关推荐
响应式web设计 html css javascript 图灵设计丛书。。
网页中的图形设计是在线内容用户体验的关键,尤其是现在的用户会使用多种设备访问网页,如智能手机、平板电脑、笔记本..., 《响应式Web图形设计》结构整、轻松易懂,能够帮助Web设计新手快速入门,并打下坚实的基础。
关于网页布局的设计, HTML 响应式 Web 设计,响应式 Web 设计让你的网页能在所有设备上有好显示。 响应式 Web 设计只使用 HTML 和 CSS。 响应式 Web 设计不是一个程序或Javascript脚本。
响应式web设计-HTML5和CSS3实战,越来越多的网站开始使用响应式设计,此书可以帮助你更好的学习它。
[图灵程序设计丛书].响应式Web设计:HTML5和CSS3实战.第2版
Luke Wroblewski,Ethan Marcotte 著;...移动优先的理念是响应式Web设计的基础,而后者又是实现理念的核心技术。只有深刻理解并掌握这两部分内容,才能切实地为互联网用户带来优秀的体验,从而实现业务目标。
《响应式Web设计实践》试读干货,响应式——适应浏览器的不同——Web设计实践
关于响应式Web设计的概念,是从2010年提出来的,但是目前在国内至今很少网站能够适应响应式,该资料为内部培训写的一个关于响应式Web设计培训,结合之前项目组的经验写的,分2季,
交互设计-响应式Web设计实践 PDF电子书下载 带书签目录 完整版
移动互联网时代到来了 本书将当前Web设计中热门的响应式设计技术与HTML5和CSS3结合起来。 为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术 不仅讨论了媒体查询 流式。
《响应式Web设计实践》干货
Bootstrap 3 综合实战项目教程,Web前端响应式开发项目实战视频教程带源码资源Bootstrap 3 综合实战项目教程,Web前端响应式开发项目实战视频教程带源码资源Bootstrap 3 综合实战项目教程,Web前端响应式开发项目...
响应式网页设计提供了 一种设计方法,可以使同一网站在智能手机、桌面电脑,以及介于这两者之间的任意设 备上完美显示。这种方法能够根据用户的屏幕尺寸,合理地为现有及将来的各种设备提 供最佳的浏览体验。 本书...
基于HTML5的响应式Web设计.pptx
当今最最时髦的响应式网页设计,优秀ppt共享
资源名称:响应式Web设计 HTML5和CSS3实战 第2版内容简介:本书将当前Web 设计中热门的响应式设计技术与HTML5 和CSS3 结合起来,为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术。书中不仅讨论...
响应式WEB移动资源库,用于ANDROID建模用
响应式web设计html5和css3实战 源代码 绝对一手!
Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计制作-毕业设计期末大作业源码课程设计 Web网页设计...