《响应式Web设计》试读:第一章:响应式Web设计基础

几年前,我们看到的网站还都是固定宽度的,目标是让所有用户都拥有相同的体验。这种固定宽度(通常为960像素左右)对笔记本电脑来说也不算宽,拥有更大显示器的用户则会在两侧看到很大的白边。 2007年,苹果iPhone首次带来了真正意义的手机上网体验,彻底改变了人们上网的方式。 本书第1版曾这么写道: “从2010年7月到2011年7月,短短12个月,全球手机浏览器的使用量就从2.86%飙升至7.02%。” 2015年年中,同一家调查机构(gs.statcounter.com)的数据显示,这个数字已经达到33.47%。北美地区的数字则是25.86%。 不管怎么统计,移动设备的增长都是前所未有的。与此同时,27英寸乃至30英寸的大屏幕显示器如今也成为了司空见惯的东西。这样一来,上网设备屏幕之间的差距也达到了前所未有之大。 面对不断扩展的浏览器和设备,我们还是有应对方案的。这个方案就是基于HTML5和CSS3的响应式Web设计。响应式Web设计可以让一个网站同时适配多种设备和多个屏幕,可以让网站的布局和功能随用户的使用环境(屏幕大小、输入方式、设备/浏览器能力)而变化。 不仅如此,基于HTML5和CSS3的响应式Web设计,并不需要依赖服务端或后端方案。 1.1 定义需求 无论你是刚刚接触响应式Web设计、HTML5、CSS3,还是已经对它们很熟悉了,我都希望本章可以实现两个目标。 如果你已经在自己的响应式Web设计中使用了HTML5和CSS3,本章可以帮你快速做一个回顾。如果你是一位新手,可以把这一章看成“新手训练营”,它会告诉你阅读本书所需的一切。 学完本章,你将对实现响应式Web设计有一个全面清晰的了解。 有人会问,既然如此,剩下9章有什么用呢?本章最后也会对此给出答案。 以下是本章的主要内容:  定义响应式Web设计  如何确定浏览器支持程度  工具和文本编辑器  第一个响应式的例子  视口meta标签的重要意义  怎么让图片随窗口缩放  用CSS3媒体查询定义断点  前面例子的不足之处  为什么学习之旅才刚刚开始 1.2 什么是响应式Web设计 “响应式Web设计”这个名字是Ethan Marcotte在2010年发明的。当时,他在A List Apart上写了一篇文章(http://www.alistapart.com/articles/responsive-web-design/),这篇文章综合运用了三种已有技术(弹性网格布局、弹性图片/媒体、媒体查询)实现了一个解决方案,就叫“响应式Web设计”。 响应式Web设计的由来 所谓响应式Web设计,就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。 最初,响应式设计是从“桌面”、固定宽度设计开始的。然后,到了小屏幕上,内容会重排,或者根据情况隐藏部分内容。可是,随着时间推移,人们发现,还是采用相反的设计思路更好,即先为小屏幕设计内容、样式,然后再向大屏幕扩展。 详细介绍这些情况之前,我们先来看看浏览器支持与文本编辑器/工具。 1.3 浏览器支持 由于响应式Web设计已经广为人知,所以跟客户及相关方沟通变得越来越容易。提到“响应式Web设计”,很多人都表示知道怎么回事。而写一个项目就可以满足所有设备的说法也很有竞争优势。 不过,浏览器支持一直是响应式Web设计面临的最大问题。市面上如此多的浏览器和设备,要想一个不落地支持并不现实。有时候是时间问题,有时候是预算问题,有时候两方面问题都有。 一般来说,要支持的浏览器版本越早,想达到现代浏览器中相同功能和效果所需的工作量就越大。因此,最好的做法是先写一个较轻量的代码架构,然后根据所需的体验针对能力更强的浏览器进行扩展,包括视觉和功能。 本书上一版还花了不少篇幅介绍怎么迎合老旧版本的桌面浏览器。但这一版不会在这方面浪费时间了。 在写作这一版的2015年年中,IE6、IE7、IE8基本消失了,就连IE9的市场份额也降到了2.45%(IE10只占1.94%,IE11上升到了11.68%)。如果你必须考虑兼容IE8甚至更低版本,在同情你的遭际之余,我必须坦率地告诉你,这本书里没多少相关的内容可资利用。 对于其他人来说,应该劝告自己的客户或老板,告诉他们为什么给那些“残疾”浏览器写代码是错误的,而把时间和资源主要放在支持现代浏览器和现代平台上才是最明智的。 不过到最后,唯一重要的因素还是你自己。在通常情况下,我们写的网站必须在所有常用浏览器里表现正常。除了基本功能,有必要提前确定针对哪个平台要实现最强的功能,以便对其他平台上的视觉和功能作出相应取舍。 这是非常实际的做法,因为从最简单的“基本”体验开始,逐步扩充(所谓“渐进增强”)更容易。相反,先做出大而全的版本,然后再针对能力不足的平台寻找后备方案(所谓“平稳退化”)则要麻烦得多。 为了进一步说明提前确定主要支持平台很重要,我们举个例子。假设你很倒霉,25%的用户都在用IE9,那你必须考虑这个版本的IE都支持什么特性,然后再相应地剪裁自己的设计方案。同样,如果有大量用户使用的手机平台是Android 2,你也要考虑类似的问题。不同平台需要考虑的“基本”体验相差很大。 如果没有合适的数据,那么我会按照一个简单粗暴的逻辑来决定是否开发某个特定平台/浏览器的版本:如果支持浏览器X的开发成本超过了浏览器X的用户创造的收益,那么就不为该浏览器开发特殊的版本。 能不能适配某个旧平台/版本不是问题,问题在于是否应该去适配它。 在确定哪些平台和浏览器版本支持什么特性时,建议参考这个网站:http://caniuse.com。这个网站的界面简洁,查询方便。 关于工具和文本编辑器 用什么文本编辑器或IDE来写响应式网站都一样。如果你觉得某个简单的文本编辑器足够你高效编写HTML、CSS和JavaScript代码,那就行啦。其他工具也一样,没有哪个工具是必需的。只要能让你写HTML、CSS和JavaScript就行。Sublime Text、Vim、Coda、Visual Studio、Notepad,选哪一个都不重要,你喜欢就好。 不过,请大家注意,现在确实出现了不少新工具(通常也是免费的)。这些工具可以把以往需要手工来做的事自动化。比如,CSS预处理器(Sass、LESS、Stylus、PostCSS)可以帮我们组织代码、变量、颜色操作和数学运算。像PostCSS这样的工具可以帮我们完成添加浏览器前缀这样烦琐的任务。另外,一些清理和验证工具可以帮我们检查HTML、CSS和JavaScript代码是否符合标准,自动提示输入错误和语法错误。 新工具始终在不断涌现,而且会不断改进。虽然本书有时会提到一些有用工具的名字,但并不代表对你来说最合适,你应该去找最适合自己的。事实上,本书的示例除了HTML和CSS标准之外,不依赖任何工具。至于怎么利用前端工具让自己的代码更快更可靠,那是你的事。 1.4 第一个响应式的例子 本章开头承诺让你在学完这一章之后,了解所有与响应式Web设计相关的知识。前面我们讨论的都是一些相关话题,现在该付诸行动了。 代码示例 下载本书示例代码的地址是:http://rwd.education/download.ziphttps://git- hub.com/benfrain/rwd。请注意,下载到的代码只包含每个示例的最终版本。比如,第2章的例子是第2章结束时的状态,而不是该章中间部分的某个状态。 1.4.1 HTML 先从HTML5结构讲起。大家先不要着急理解每一行代码的用途(特别是<head>中的代码),第4章会详细介绍它们。 现在,我们只关注<body>标签中的元素。必须承认,现在的网页看起来一点也不特别,只有几个DIV、一张LOGO图、一张图片(看起来很好吃的松饼)、一两段文本和一个项目列表 。 以下是删节后的代码。为简单起见,段落中的文字已经隐藏了,因为我们要关注的只是结构。只要知道那些文字介绍了怎么制作标准的英式松饼就行了。 如果想看完整的HTML文件,请解压下载后的代码。 <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>Our first responsive web page with HTML5 and CSS3</ title> <meta name="description" content="A basic responsive web page – an example from Chapter 1"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div class="Header"> <a href="/" class="LogoWrapper"><img src="img/SOC-Logo. png" alt="Scone O'Clock logo" /></a> <p class="Strap">Scones: the most resplendent of snacks</ p> </div> <div class="IntroWrapper"> <p class="IntroText">Occasionally maligned and misunderstood; the scone is a quintessentially British classic.</p> <div class="MoneyShot"> <img class="MoneyShotImg" src="img/scones.jpg" alt="Incredible scones" /> <p class="ImageCaption">Incredible scones, picture from Wikipedia</p> </div> </div> <p>Recipe and serving suggestions follow.</p> <div class="Ingredients"> <h3 class="SubHeader">Ingredients</h3> <ul> </ul> </div> <div class="HowToMake"> <h3 class="SubHeader">Method</h3> <ol class="MethodWrapper"> </ol> </div> </body> </html> 默认情况下,网页布局是弹性的。就它现在这个样子把它打开(还不包含媒体查询),缩放浏览器窗口,你会看见文本会根据屏幕缩放自动重排。 那换个设备怎么样呢?在没有CSS的情况下,iPhone中的效果如下图所示。 在iPhone中也是一个“正常的”网页。这是因为iOS默认会按980像素宽度来渲染网页,然后再把页面缩小呈现在视口当中。 浏览器中用于呈现网页的区域叫视口(viewport)。视口通常并不等于屏幕大小,特别是可以缩放浏览器窗口的情况下。 因此,从现在开始,我们会使用这个准确的术语指代可以呈现网页的区域。 为了解决前面的问题,可以在网页的<head>中添加下面这行代码: <meta name="viewport" content="width=device-width"> 这个视口的<meta>标签是一种非标准的(但却是事实标准的)方式,它告诉浏览器怎么渲染网页。在这里,<meta>标签想表达的意思是:按照设备的宽度(device-width)来渲染网页内容。事实上,在支持这个标签的设备上给你看一看效果,你就明白了。 不错呀!现在,网页中的文字看起来更有“原生”的感觉了。我们继续。 第2章在介绍媒体查询的时候还会详细讨论<meta>标签的更多设置和组合用法。 1.4.2 图片 有人说“一图胜千言”,确实如此。我们网页中关于松饼的文字介绍再多,也没有图片有吸引力。下面我们就在页面上方添加一张松饼的图片,效果类似引诱用户往下看的大题图。 哇,真是好大一张图(2000像素宽),它让整个网页看起来都失衡了。不行,必须解决这个问题。可以用CSS给图片指定固定宽度,但问题是我们想让它能在不同大小的屏幕中自动缩放。 比如,我们例子中的iPhone屏幕宽度为320像素,如果我们把图片设置成320像素宽,那么iPhone屏幕旋转后又怎么办呢?这时候320像素变成了480像素。解决方案很简单,只要一行CSS代码就可以让图片随容器宽度自动缩放。 在这里我们创建一个CSS文件:css/styles.css,将它链接到HTML页面的头部。 以下是我们在这个CSS文件中写的代码。一般来说,应该先设置一些默认值,这些话题后面几章我们再讨论。现在我们就加入这点代码: img { max-width: 100%; } 回到手机上,刷新页面,结果比较符合预期了。 这里声明max-width规则,就是要保证所有图片最大显示为其自身的100%(即最大只可以显示为自身那么大)。此时,如果包含图片的元素(比如包含图片的body或div)比图片固有宽度小,图片会缩放占满最大可用空间。 为什么不用width:100%? 要实现图片的自动缩放,也可以使用更通用的width属性,比如width:100%。然而,这条规则在这里的效果不同。如果给width属性设置一个值,那么图片就会按照该值显示,不考虑自身固有宽度。以我们例子中的LOGO(同样也是一张图片)为例,这条规则会导致它显示得跟它的容器一样宽。在容器比图片宽得多的情况下(就像我们这里的LOGO一样),图片会被无谓地拉伸。 很好,现在图片和文本都显示正常了。不管视口多大,至少水平方向上再也没有内容溢出了。 再回过头来在较大的视口中看看效果。下图是在视口宽度大约为1400像素下看到的效果,基本样式下的文本和图片明显被拉长了。 这可不行!事实上,视口宽度达到600像素时,效果就不好了。在这个宽度上,如果我们可以对某些元素进行重排,也许可以有所改进,比如调整图片大小并将其放置在一侧,或修改某些元素的字体大小和背影颜色。 没问题,使用CSS媒体查询可以轻易实现我们说的所有功能。 1.4.3 媒体查询 我们知道,当视口宽度超过600像素时,当前的页面布局存在被严重拉伸的问题。下面我们就使用CSS3的媒体查询根据屏幕宽度来调整布局。媒体查询可以让我们在某些条件下(如宽度和高度为多少的情况下)为网页应用样式。 不针对流行的设备宽度设置断点 所谓“断点”,就是某个宽度临界点,跨过这个点布局就会发生显著变化。 人们在刚开始使用媒体查询的时候,经常会针对当时流行的设备设置断点。当时,iPhone(320像素 × 480像素)和iPad(768像素× 1024像素)的宽度决定了断点。 不过,当时那样做并不好,现在来看就更不可取了。这是因为这样实际上把设计跟特定的屏幕大小绑定了。既然是响应式设计,那应该与显示它的设备无关才对,而不是只在某些屏幕中才最合适。 断点应该由内容和设计本身决定。比如你的设计可能在500像素或更宽的时候看起来就不对了,当然也许是800像素。总之,断点应该由你自己的项目设计决定。 第2章将全面介绍媒体查询,因此“媒体查询”也是那一章的名字。 不过,为了说明如何改进我们的设计,这里可以只关注一种媒体查询,即最小宽度媒体查询。在这个媒体查询中设置的CSS规则,只在视口符合最小定义宽度条件时才会应用到网页。实际的最小宽度可以使用不同的长度单位指定,比如百分比、em、rem和px。在CSS中,最小宽度媒体查询是这样写的: @media screen and (min-width: 50em) { /* 样式 */ } @media指令告诉浏览器这里是一个媒体查询,screen(技术上讲,不需要在这里声明“屏幕”,具体细节请参考下一章)告诉浏览器这里的规则只适用于屏幕类型,而and (min-width: 50em)的意思是其中的规则只适用于视口宽度在50em以上的情况。 Bryan Rieger第一次指出(http://www.slideshare.net/bryanrieger/rethinking-the- mobile-web-by-yiibu): “没有媒体查询本身就是媒体查询。” 这句话的意思就是,我们在媒体查询外面写的第一条规则,实际上是针对所有媒体的“基本”样式。在此基础上,可以再针对不同能力的设备加以扩展。 现在,只要知道应该以最小屏幕为起点,然后再根据需求渐进扩充视觉和功能即可。 针对更大的屏幕做修改 我们知道,视口宽度达到600像素(或37.5rem)时,布局就会显得很难看。下面我们再通过一个例子,来展示怎么根据视口大小实现不同的布局。 基本上所有浏览器默认的文本大小都是16像素,因此用像素值除以16就可以得到rem值。第2章会进一步介绍为什么需要这样做。 首先,不让题图太大,而是把它挪到右侧去。然后把介绍文字放在图的左侧。 然后,再把主要的文本内容,也就是如何制作松饼的方法,放在位于右侧带框线的配料表左下方。 这些样式调整都可以封装到一个媒体查询当中。下图就是调整之后的效果。 完成之后的页面在较小的屏幕上还和以前一样,只是在视口宽度大于50rem时,就会调整为新的布局。 以下是我们添加的布局样式: @media screen and (min-width: 50rem) { .IntroWrapper { display: table; table-layout: fixed; width: 100%; } .MoneyShot, .IntroText { display: table-cell; width: 50%; vertical-align: middle; text-align: center; } .IntroText { padding: .5rem; font-size: 2.5rem; text-align: left; } .Ingredients { font-size: .9rem; float: right; padding: 1rem; margin: 0 0 .5rem 1rem; border-radius: 3px; background-color: #ffffdf; border: 2px solid #e8cfa9; } .Ingredients h3 { margin: 0; } } 还算不错,是吧?只用了少量代码,就让页面实现了对视口宽度变化的响应,为用户呈现了更实用的外观。有了这些媒体查询样式,在iPhone上我们看到的页面如下: 而在50rem宽时,页面效果如下: 添加更多装饰对我们理解什么是渐进增强并没有什么意义,因此这里就省略了。如果你想查看相关代码,可以解压下载的示例代码。 虽然这个例子本身很简单,但它已经涵盖了响应式Web设计的基本方法。 总结一下我们介绍的基本内容。首先是“基本的”样式,它适用于任何设备。在这个样式基础上,我们再为不同视口、不同能力的设备,渐进增加不同的视觉效果和功能。 CSS媒体查询的(3级)规范在这里:https://www.w3.org/TR/css3-media- queries/。 还有一个CSS媒体查询(4级)的草案:http://dev.w3.org/csswg/media- queries-4/。 1.5 示例的不足之处 本章介绍了使用HTML5和CSS3实现响应式Web设计相关的所有基本要素。 我们都知道,前面的示例远远不能涵盖我们想要实现的目标,同样也不代表我们只能做到这些。 如果我们想让网页响应环境光线的变化呢?如果我们想在用户使用不同输入设备(手指而不是鼠标)时改变链接大小呢?如果我们想只用CSS实现动画和元素移动效果呢? 还有标记。怎么使用标记来构建页面,才能保证所有元素都具有语义,比如article、section、menu,或者怎么让表单内置支持验证(不需要JavaScript参与)?怎么实现在不同视口中修改元素显示的次序呢? 别忘了图片。这个示例中使用了弹性图片,可是如果用户使用手机查看页面,那么他会下载一个很大的图片(至少2000像素以上),而在屏幕上又只能缩成几分之一显示。这样页面会显得很卡。还有更好的办法吗? 还有LOGO和图标呢。这个示例使用的是PNG图片,但使用SVG(Scalable Vector Graphics,可伸缩矢量图)可以简单地适用各种分辨率。SVG图形看起来非常清晰,无论使用什么屏幕。 好在你还在看这本书,这些问题的答案将在后续章节中陆续揭晓。 1.6 小结 收获不小吧,这一章让你了解响应式Web设计相关的所有基本要素。不过,正像我们刚刚说过的,还有很多方面存在不小的改进空间。 其实还不够,因为我们不只想要掌握响应式Web设计的全部技能,更想给用户提供最刺激的体验。所以还得继续学习。 首先,我们必须知道CSS媒体查询的3级和4级标准都提供了哪些特性。我们看到了怎么让网页响应视口宽度变化,但我们可以做的远远不止这一点,稍后还将有更精彩的内容纷至沓来。赶紧翻到下一章去看看吧。

>响应式Web设计

响应式Web设计
作者: 本·弗莱恩 (Ben Frain)
副标题: HTML5和CSS3实战
isbn: 7115446555
书名: 响应式Web设计
页数: 220
译者: 奇舞团
定价: CNY 59.00
出版社: 人民邮电出版社
装帧: 平装
出版年: 2017-2-1