应式Web设计(Responsive Web design)的理念是,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。
无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;
换句话说,页面应该有能力去自动响应用户的设备环境。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
几年前,弹性布局(flexible layout)几乎是一种奢侈品,所谓弹性,也只是体现在竖排布局以及字号等方面;图片始终可以轻易的破坏页面结构,而且即使是哪些弹性的元素结构,在很极端的情况下,仍会破坏布局。所以,所谓的弹性布局其实并非那样弹性,它有时甚至不能适应台式机与笔记本的屏幕分辨率差异,更不用说手机等移动设备了。
该实例的实现方式完美的结合了液态网格和液态图片技术,并且聪明的在正确的地方使用了正确的HTML标记。"液态网格"是一种很常见的实践方式;对于"液态图片"技术,下面的文章做了不错的介绍
===========
弹性图片
响应式Web设计的思路中,一个重要的因素是怎样处理图片方面的问题。有很多同比缩放图片的技术,其中有不少是简单易行的。其中,由Richard Rutter最先尝试的一种做法比较流行,即使用CSS的max-width属性。这个方法在Ethan Marcotte的液态图片一文中也有提到。
img { max-width: 100%;}
只要没有其他涉及到图片宽度的样式代码覆盖掉这一行规则,页面上所有的图片就会以其原始宽度进行加载,除非其容器可视部分的宽度小于图片的原始宽度。上面的代码确保图片最大的宽度不会超过浏览器窗口或是其容器可视部分的宽度,所以当窗口或容器的可视部分开始变窄时,图片的最大宽度值也会相应的减小,图片本身永远不会容器边缘隐藏和覆盖。实际上,就像Jason Grigsby在他的CSS Media Query for Mobile is Fool's Gold一文中提到的,"液态图片背后的思路,就是无论何时,都确保在其原始宽度范围内,以最大的宽度同比完整的显示图片。我们不必在样式表中为图片设置宽度和高度,只需要让样式表在窗口尺寸发生变化时辅助浏览器对图片进行缩放。" 一种简而美的方法。
图片本身的分辨率及加载时间是另外一个需要考虑的问题。虽然通过上面的方法,可以很轻松的缩放图片,确保在移动设备的窗口中可以被完整浏览,但如果原始图片本身过大,便会显著降低图片文件的下载速度,对存储空间也会造成没有必要的消耗。
响应式图片
由Filament Group提出的"响应式图片"技术思想,有助于解决上面提到的问题:不仅要同比的缩放图片,还要在小设备上降低图片自身的分辨率。可以看下demo页面先。
这个技术的实现需要使用几个相关文件,我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js),一个.htaccess文件,以及一些范例资源文件。具体使用方法可以参考Responsive Images的说明文档。大致的原理是,rwd-images.js会检测当前设备的屏幕分辨率,如果是大屏幕设备,则向页面head部分中添加BASE标记,并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。当这些请求到达服务器端,.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片",并进行相应的反馈输出。对于小屏幕的移动设备,原始尺寸的大图片永远不会被用到。
这项技术支持多数的现代浏览器,包括IE8+、Safari、Chrome和Opera,以及这些浏览器的移动设备版本;在FireFox及一些旧浏览器中,则会优雅降级:我们仍可得到小图片的输出,但同时,原始大图也会被下载。
禁用iPhone中的图片自动缩放
在iPhone及iPod Touch中,页面会被自动的同比例缩小至最适合屏幕大小的尺寸,x轴不会产生滚动条,用户可以上下拖拽浏览全部页面,或在需要的时候放大页面的局部。这里会产生一个问题,即使我们运用响应式Web设计的思想,专门为iPhone的小屏输出小图片,它同样会随着整个页面一起被同比例缩小,如下图左侧所示。
我们可以使用苹果专有的一些meta标记来解决类似的问题。在页面的部分添加以下代码(详情可以参考Think Vitamin的相关文章):
- <meta name="viewport" content="width=device-width; initial-scale=1.0">
将initial-scale的值设定为"1",即可覆写默认的缩放方式,保持原始的尺寸及比例。更多关于viewport meta标记的用法,可以参考苹果官方的文档。
相关推荐
响应式web设计 html css javascript 图灵设计丛书。。
关于网页布局的设计, HTML 响应式 Web 设计,响应式 Web 设计让你的网页能在所有设备上有好显示。 响应式 Web 设计只使用 HTML 和 CSS。 响应式 Web 设计不是一个程序或Javascript脚本。
移动互联网时代到来了 本书将当前Web设计中热门的响应式设计技术与HTML5和CSS3结合起来。 为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术 不仅讨论了媒体查询 流式。
[图灵程序设计丛书].响应式Web设计:HTML5和CSS3实战.第2版
本资源演示了如何使用媒体查询的方式开发移动设备优先的响应式布局网页。
Python基于Django购物网站HTML5响应式设计毕业源码+mysql+毕业设计.zipPython基于Django购物网站HTML5响应式设计毕业源码+mysql+毕业设计.zipPython基于Django购物网站HTML5响应式设计毕业源码+mysql+毕业设计....
注:无后台 html5全屏滚动响应式设计师个人主页模板
响应式web设计-HTML5和CSS3实战,越来越多的网站开始使用响应式设计,此书可以帮助你更好的学习它。
《响应式Web图形设计》以创建响应式Web的角度,介绍了基础的HTML和CSS语法,并深入研究了响应式Web设计中色彩、布局、图像、排版、动画、视频和音频等方面的内容。, 《响应式Web图形设计》结构整、轻松易懂,能够...
响应式网站设计公司整站模板
html5响应式设计师分享平台网页模板源码
高端HTML5网络公司响应式模板+网站设计公司网站源码带后台
网站模板源码-html5响应式交互网站源码 html网络工作室响应式模板(demo21)。资源中包含了详细的系统图文搭建教程。源码都是实际项目,经过测试可以正常稳定运行在服务器,需要具备基础服务器搭建知识,不会搭建的...
基于HTML5的响应式网站的设计与实现(论文)正文.docx
响应式网页设计的HTML网站源码是当今网络发展的趋势。它通过灵活的布局和自适应的设计,确保了网站在各种设备上都能提供最佳的观看体验。这套源码适用于不同规模的项目,无论是个人博客、企业宣传还是电子商务平台,...
本书应用 HTML5 和 CSS3 提供的最新最有用的技术,扩展了响应式网页设计的方法论, 以便网站更简洁、更易于维护。本书还讲解了编写和发布代码、图片、文件的最佳实践。 只要你懂 HTML 和 CSS,你就能制作响应式网站
html5 css3响应式布局介绍及设计流程 实现响应式布局的3种手段.zip
用HTML+CSS跟简单的js操作完成响应式星巴克首页,一个简单的响应式页面,非常适合网页设计,html期末大作业。
基于HTML5的响应式Web设计.pptx