响应式web设计:html5和css3实战

[查看原书请点我 O(∩_∩)O](http://pan.baidu.com/s/1jGqjwLC) # 第1章 HTML5、CSS3及响应式设计入门 本章内容 * 支持小屏幕设备的重要性 * 什么是移动网页设计 * 什么是响应式网页设计 * 优秀响应式网页实例赏析 * 视口和屏幕的区别 * 安装和使用修改视口的浏览器扩展程序 * 使用HTML5编写更简洁的标记 * 使用CSS3解决常见的设计问题 ## 1.1 为什么智能手机很重要(而老版的IE不再重要) 我们应该把精力花在更有价值的地方,用手机上网的人比台式机和笔记本中的IE6和IE7上网的人多多了 ## 1.2 响应式设计一定是最佳选择吗 如果预算充足且形势需要,做一个真正的“手机版”网站是首选。大多数情况下,根据视口大小为用户提供与之匹配的视觉效果还是优先选择。简而言之,我们需要那些能响应各种设备大小的完美设计。 ## 1.3 响应式网页设计的定义 响应式网页设计是针对任意设备对网页内容进行完美布局的一种显示机制。 ## 1.4 为什么要在响应式设计上停滞不前 我们可以走的更远。HTML5提供了比HTML4更多且更加语义化的标签。CSS3的媒体查询是响应式设计不可或缺的组成部分,CSS3的其他功能给了我们前所未有的灵活性。我们将挣脱背景图像和复杂的Javascript代码的羁畔,拥抱简洁的CSS3渐变、投影、字体、动画和变换。 ## 1.5 响应式网页设计示例 迷恋像素?忘了它吧!大多数情况下我们不会使用像素,而回使用相对度量单位(em或者百分比)。 ### 1.5.1 下载视口调试工具 IE :[IE Developer Toolbar](http://www.microsoft.com/en-us/download/details.aspx?id=18359) Safari :[ResizeMe](http://web.me.com/aaronholla/Safari_Extensions/ResizeMe.html)、[Resize](http://re-sizeSafari.com) Firefox :[Firesizer](https://addons.mozilla.org/en-US/firefox/addon/firesizer) 我的简单页面 :[What size is my viewport page?](http://benfrain.com/easily-display-the-viewport-size-of-your-page-for-responsive-designs/) > 视口和屏幕尺寸 > 视口和屏幕尺寸不是同一个概念。**视口**是指浏览器窗口内的内容区域,不包含工具栏、标签栏等。也就是网页实际显示的区域。屏幕尺寸指的是设备的物理显示区域。需要注意的是有些浏览器调整工具显示的尺寸包含浏览器的其他元素,诸如地址栏、标签栏和搜素栏,而有些工具则不是这样。在下面的截图中,实际的视口尺寸显示在右上角( 1156x921 像素),同时Firesizer 插件将窗口尺寸显示在右下角( 1171x1023 像素)。 [http://thinkvitamin.com](http://thinkvitamin.com) [http://2011.dconstruct.org](http://2011.dconstruct.org) ## 1.5.2 在线创意源泉 推荐: [http://meduaqueri.es](http://meduaqueri.es) ## 1.6 为什么HTML5很优秀 HTML5强调简化标签,尽链接那些我们必须的CSS、Javascript和图片文件。响应式设计的一个主要目标就是,网站不仅要对用户有限的视口做出响应,还要以最快的时间加载页面。HTML5可以在表单提交等基本网页交互场景中对用户做出反馈,允许我们创建更加简洁和快速的代码。 ### 1.6.1 省时省力 `` `` ### 1.6.2 新增了语义化标签元素
省去了注释 ## 1.7 CSS3为响应式设计和更多创新奠定了基础 CSS3以CSS2.1为核心追加的功能。 ### 1.7.1 底线:CSS3不破坏任何东西 老浏览器会忽略无法解析的CSS3属性 ### 1.7.2 CSS3如何解决日常设计问题 圆角tab css代码: a{ float: left; height: 40px; line-height: 40px; padding-left: 0.8em; padding-right: 0.8em; border-top-left-radius: 8px; border-top-right-radius: 8px; background-image:url(images/headerTiny.png); background-repeat:repeat-x; } 不需要渐变背景图片,老版本浏览器提供纯色背景 a{ float: left; height: 40px; line-height: 40px; padding-left: 0.8em; padding-right: 0.8em; border-top-left-radius: 8px; border-top-right-radius: 8px; background-color: #42c264; background-image: -webkit-linear-gradient(#4fec50, #42c264); background-image: -moz-linear-gradient(#4fec50, #42c264); background-image: -o-linear-gradient(#4fec50, #42c264); background-image: -ms-linear-gradient(#4fec50, #42c264); background-image: -chrome-linear-gradient(#4fec50, #42c264); background-image: linear-gradient(#4fec50, #42c264); } 属性前缀 -moz- 代表火狐,-ms- 代表微软ie 正式版不需要 ## 1.8 看呐,不用图片 [http://www.panic.com/blog/](http://www.panic.com/blog/)上的记事贴。CSS3制作动画比Javascript或Flash更轻量级,更好维护。 另一个优秀的CSS3动画示范例[http://demo.marcofolio.net/3d_animation_css3](http://demo.marcofolio.net/3d_animation_css3) 下面的例子在Firefox中也很炫,[http://designlover.com/examples/dynamic_stack_of_index_cards](http://designlover.com/examples/dynamic_stack_of_index_cards) 它们是“渐进增强”的完美印证。 ## 1.9 HTML5和CSS3现在就能用吗 任何工具或技术都应该只在应用程序需要它的时候使用。 以我的经验,一开始通常会问自己以下问题, * 客户是否想支持互联网用户增长最迅猛的市场?如果想,那响应式方法就很适合。 * 客户是否想要最简洁、快速,且易于维护的代码?如果想,那响应式设方法就是很适合。 * 客户能否理解用户体验可以且本应该根据浏览器不同而不同?如果可以理解,那响应式犯法就很合适。 * 客户师傅要求设计效果在所有浏览器中都保持一致,包括IE8以及更低版本?如果是,响应式设计就不合适。 * 该网站的当前或者预期客户中,是否百分之七十以上的人可能使用Internet Explorer8或者更低版本?如果是,则响应式设计不合适。 在预算允许的情况下,一个完全定制的“移动”版网站比响应式设计更适合。 ## 1.10 响应式网页设计不是灵丹妙药 根据我的经验,如果预算有限或者开发一个完全定制的“移动网站”不太可行,那么响应式网页设计较之标准的固定宽度设计,总能提供更好的无歧视的用户体验。 ## 1.11 引导客户:网站不一定在所有浏览器中表现一致 着手响应式设计之前,要跨越的最后一道障碍往往时思维定式 在接手一个新项目时,不论响应式设计是否合适,我都会试着给客户说明以下几点: * 允许页面显示效果在老旧浏览器中有细微的差别,这样可以使代码更易维护,将来更新的成本也更低。 * 让页面元素在那些老旧浏览器(如Internet Explorer8及更低版本)中表现一直会导致网站增加大量的图片。这会使网站变慢,制作成本变高,而且更难维护。 * 现代浏览器可以理解的简洁代码等同于更快速的网站。快速响应的网站在搜索引擎中的评级高于慢腾腾的网站。 * 使用来就浏览器的用户越来越少,使用现代浏览器的哟不过户越来越多————我们应该支持大多数。 * 最重要一点,支持现代浏览器,你就能尽情地享受响应式网页设计,它能响应不同设备的不停浏览器视口。 ## 1.12 小结 介绍了什么是响应式设计,欣赏了已有的优秀范例,也认同以桌面电脑为中心的设计思想应该转变成为未知设备而设计的思想。确定HTML5的大部分内容可用,而且能发挥其优势。实现响应式设计的关键技术是CSS3。首先,利用CSSS3的媒体查询,针对特定的视口设置特定的CSS规则。 # 第2章 媒体查询:支持不同的视口 媒体查询可以让我们根据设备显示器的特性为其设定CSS样式。 ## 2.1 现在就能使用媒体查询 除ie6、7、8,第9章有兼容修复方案 ## 2.2 为什么响应式设计需要媒体查询 没有CSS3的媒体查询模块,就不能针对设备特性(如视口宽度)设置特定的CSS样式。 > 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。 > 媒体查询中可用于检测的媒体特性有**width**、**height**、**color**(等)。 > 使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。 ### 2.2.1 媒体查询语法 body{ background-color:grey; } @media screen and (max-width:960px){ body{ background-color: red; } } @media screen and (max-width:768px){ body{ background-color: orange; } } @media screen and (max-width:550){ body{ background-color:yellow; } } @media screen and(max-width:320px){ body{ background-color: green; } } 媒体查询一块纵向放置的显示器 `and`、`not`组合 使用css的`@import`方式会增加HTTP请求(这会影响加载速度),所以请谨慎使用该方法 ### 2.2.2 媒体查询能检测哪些特性 * `width`:视口宽度 * `height`:视口高度 * `device-width`:渲染表面的宽度(对我们来说,就是设备屏幕的宽度) * `device-height`:渲染表面的高度(对我们来说,就是设备屏幕的高度) * `orientation`:检查设备处于横向还是纵向 * `aspect-ratio`:基于视口宽度和高度的宽高比。一个16:9比例的显示屏可以这样定义 `aspect-ratio:16/9` * `device-aspect-ratio`: 和`aspect-ratio`类似,基于设备渲染平面宽度和高度的宽高比。 * `color`:每种颜色的位数。例如`min-color:16`会检测设备是否拥有16位颜色 * `color-index`: 设备的颜色索引表中的颜色数。值必须是非负整数。 * `monochrome`: 检测单色帧缓冲区中每个像素使用的位数。值必须是非负整数,如`monochrome: 2` * `resolution`: 用于检测屏幕或者打印机的分辨率,如`min-resokution:300dpi`。还可以接受每厘米像素点的度量值, 如 `min-resolution:118dpcm`。 * scan: 电视机的扫描方式,值可设为`progressive`(逐行扫描)或`interlace`(隔行扫描)。720p HD电视(720p的p即表明是逐行扫描)匹配`scan: progressive`,而1080i HD电视(1080i中的i表示隔行扫描)匹配`scan:interlace`。 * `grid`:用来检测输出设备是网络设备还是位图设备 上述所有特性中,除了scan和grid之外,都可使用min和max前缀来创建一个查询范围。 ### 2.2.3 用媒体查询改造我们的设计 所谓层叠,就是指样式表中后面的样式会覆盖前面相同的样式(除非前面的样式具有更高的针对性)。因此我们可以在样式表的开头设置基本样式,以便适应所有设计,然后使用媒体查询来进一步重写相应的部分。 ### 2.2.4 加载媒体查询的最佳方法 [Respond.js](https://github.com/scottjehl/Respond) 为了ie8-。建议在已有的样式表中追加媒体查询样式。 ## 2.3 我们的第一个响应式设计 And the winner isn't 小网站 [http://www.andthewinnerisnt.com](http://www.andthewinnerisnt.com) ### 2.3.1 我们的设计是固定宽度的,不要惊讶 我开始基于960像素的固定宽度制作一个界面原型。理论被大部分人理解还要好几年。在此之前,更多的是将现有的桌面版网页设计改造成响应式。 > 重置样式,我的是*Eric Meyer*的原版([http://meyerweb.com/eric.tools/css/reset](http://meyerweb.com/eric.tools/css/reset)) 技巧来自*Dan Cederholm*([http://simplebits.com](http://simplebits.com)) ### 2.3.2 响应式设计中要保持图片尽可能精简 切取小图 ### 2.3.3 小视口下的内容剪切 小了会内容显示被遮挡、剪切 ## 2.4 阻止移动浏览器自动调整页面大小 [Webkit](http://www.webkit.org)核心。支持 viewport meta元素覆盖默认的画布缩放设置。 缩放实际设备尺寸2倍显示的meta标签 > 安装ios模拟器和Android模拟器 > [Android软件开发工具包](http://developer.android.com/sdk/) > iOS模拟器是Xcode的一部分 在`~/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications iOS Simulator.app`。 meta标签还可以控制页面可缩放的范围。 下面代码最大3倍,最小至设备宽度的一般: 禁止用户缩放 ## 2.5 针对不同视口宽度修正设计 ## 2.6 响应式设计中内容始终优先 ## 2.7 媒体查询只是必要条件之一 ###我们需要流动布局 媒体查询只能为我们提供自适应设计效果,不能真正实现响应式设计。 ## 2.8 小结 # 第3章 拥抱流式布局 ## 3.1 固定布局经不起未来考验 我们需要一些适应未知设备的方法。 ## 3.2 为什么响应式设计需要百分比布局 那些仅使用媒体查询来适应不同视口的固定宽度设计,只会从一组css媒体查询规则突变到另一组,两者之间没有任何平滑渐变。 伊桑 马科特的[文章](http://www.alistpart.com/articles/respnsize-web-design) ## 3.3 将网页从固定布局修改为百分比布局 ### 3.3.1 需要牢记的公式 将固定像素宽度转换对应的百分比宽度:**目标元素宽度÷上下文元素宽度=百分比宽度** ### 3.3.2 设置百分比元素的上下文 最外层的元素的宽度是相对视口的,多少取决于我们的感觉,保证网页在视口内有最美观的视觉效果即可。 ### 3.3.3 必须时刻牢记上下文 ul>li>a 宽度设在li上 ## 3.4 用em替换px 现代浏览器的默认文字大小都是16像素(显示声明除外)。 因此一开始body标签下应用下列任何一条规则产生的效果一样。 font-size:100%; font-size:16px; font-size:1em; > em究竟是什么 > em是书面形式的大写字母“M”的简称,发音和 M 相同。以前,“M”常被用来测定某种字体的大小,因为它是英文字母中最大(最宽)的字母。如今,em作为一个测量单位,指的是特定字母的宽度和高度相对于特定字体磅值的比例。 ## 3.5弹性图片 ie7+: img,object,video,embed { max-width:100%; } 对于