【笔记】web响应式设计：HTML5和CSS3实战 第一章~第三章
看这本书的过程比看JS的书的速度要快很多，在看这本书之前已经对响应式有了解了，HTML5内容也是都看过视频教程呀 看过W3CSCHOOL以及一些文章的整体介绍 .对弹性布局，响应式，自适应、尺寸的换算、媒体查询，都有在工作中具体项目中运用了。所以看起来很轻松，笔记也比较松散，对自己比较了解的略过了，比较重要的做了笔记。
读的过程中也有收获到新的东西！现在觉得看书收获到的东西是相对整体系统的。而视频教程、系列文章讲的都是较常用和较需要，对于不需要运用到的东西可能就省略掉了。但书中会比较详尽一些，这也就无意识了增加了自己的意识。
1 html5、css3及响应式设计入门
1.5响应式网页设计示例
1.5.1 下载视口调试工具
Ie用户下载安装Microsoft Internet Explorer Developer Toolbar,
下载地址：http://www.microsoft.com/download/en/details.aspx?id=18359
如果您在使用safari。虽然resizeMe(http://web.me.com/aaronholla/safari_Extensions/ResizeMe.html)的功能类似且免费，但我最爱Resize(http://resizeSafari.com).。
Firefox用户请下载Firesizer(https://addons.mozilla.org/en-US/firefox/addon/firesizer/)
Chrome请下载Windows Resizer (https://chrome.google.com/webstore/detail/kkelicaakdan-hinjdeammmilcgefonfh)。
视口和屏幕尺寸不是同一个概念。视口是指浏览器窗口内的内容区域，不包含工具栏，标签栏等。也就是网页实际显示的区域。屏幕尺寸是指的设备的物理显示区域。需要注意的是有些浏览器调整工具显示的尺寸包含浏览器的其它元素，诸如地址栏，标签栏和搜索栏。而有些不是。
1.5.2在线创意源泉
推荐一个响应式创意收集网站：http://mediaqueri.es
虽然这里收集的网站并不全是采纳完整的响应式方法论，即先针对小视口进行设计，然后逐步针对大视口进行渐进增强支持。
1.6 为什么HTML5很优秀
1.6.1省时省力
如今，在HTML5中，DOCTYPE化繁为简：
<!DOCTYPE html>
链接脚本文件变的更简单：
<script src=”js/jquery-1.6.2.js”></script>
Type属性不再是必需的。链接CSS文件与此类似。
Html5也接受非常松散的语法。如我们的标签和属性名大小写字母混用，但HTML5并不介意。这样的代码照样能通过W3C的HTML5验证工具(http://validator.w3.org/)的验证。
1.6.2新增了语义化标签元素
制作标准的HTML页面，头部和导航一般都是标配。
<header>
<nav>
<ul id=”nav-list”>
<li></li>
</ul>
</nav>
</header>
搜索引擎能比以前更好的理解网页，并相应地评定网页内容。
1.7CSS3为响应式设计和更多创新奠定了基础
Css3是在CSS2的基础上按模块构建的，以CSS2.1标准为核心。每个模块都会增加功能或是替换CSS2.1S标准中已有章节。CSS工作组的设想是新的CSS模块不会与CSS2.1标准冲突，这些模块只会追加新功能，改进已有
1.9html5和css3现在就能用吗
客户是否想支持互联网用户增长最迅猛的市场？如果想，那响应式方法就很适合。
客户是否想要最简洁、快速，且易于维护的代码？如果想，那响应式方法就很适合。
客户能否理解用户体验可以且本应该根据浏览器不同而不同？如果可以理解，那响应式方法就很适合。
客户是否要求设计效果在所有浏览器中都保持一致， 包括 IE 8以及更低版本？如果是，响应式设计就不适合。
该网站的当前或预期客户中，是否有百分之七十以上的人可能使用 Internet Explorer 8或者更低版本？如果是，则响应式设计不适合。
1.10 响应式网页设计不是灵丹妙药
1.11 引导客户：网站不必在所有浏览器中表现一致
当我接手一个新项目时，不论响应式设计是否适合，我都会试着给客户说明以下几点。
允许页面显示效果在老旧浏览器中有细微的差别，这样可以使代码更易维护，将来更新的成本也更低。
让页面元素在那些老旧浏览器（如 Internet Explorer 8及更低版本）中表现一致会导致网站增加大量的图片。这会使网站变慢，制作成本变高，而且更难维护。
现代浏览器可以理解的简洁代码等同于更快速的网站。快速响应的网站在搜索引擎中的评级高于慢腾腾的网站。
使用老旧浏览器的用户越来越少，使用现代浏览器的用户越来越多——我们应该支持大多数！
最重要的一点，支持现代浏览器，你就能尽情地享受响应式网页设计，它能响应不同设备的不同浏览器视口。
2.媒体查询：支持不同的视口
2.1 现在就能使用媒体查询
媒体查询已经被广泛使用， 而且也被浏览器广泛支持 （如 Firefox 3.6+、 Safari 4+、 Chrome 4+、Opera 9.5+、iOS Safari 3.2+、Opera Mobile 10+、Android 2.1+和 Internet Explorer 9+） 。此外，要对老版本浏览器如 Internet Explorer 6、7和 8实现兼容修复（虽然基于 JavaScript）也很容易。
可以查阅第 9章关于解决跨浏览器响应问题的内容。
2.2.1 媒体查询语法
CSS媒体查询到底长什么样，更重要的是，它是怎么起作用的？
将下面这段代码插入到任意某个 CSS文件的最后，然后预览与之关联的网页：
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: 550px) {
body {
background-color: yellow;
}
}
@media screen and (max-width: 320px) {
body {
background-color: green;
}
}
2.2.1 媒体查询语法
<link rel="stylesheet" media="screen and (orientation: portrait)" href="portrait-
screen.css" />
首先，媒体查询表达式询问了媒体类型（你是一块显示屏吗？ ） ，然后询问了媒体特性（显示屏是纵向放置的吗？ ） 。任何纵向放置的显示屏设备都会加载 portrait-screen.css
样式表， 其他设备则会忽略该文件。 在媒体查询的开头追加 not 则会颠倒该查询的逻辑。
例如，下面的代码就会颠倒前例中的效果，会使非纵向放置的显示屏设备加载样式文件：
<link rel="stylesheet" media="not screen and (orientation: portrait)" href="portrait-
screen.css" />
也可以将多个表达式组合在一起。如，我们扩展一下前面的例子，限制只有视口宽度大于 800像素的显示屏设备才能加载文件。
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:
800px)" href="800wide-portrait-screen.css" />
更进一步，还可以写一个媒体查询列表。查询列表中的任意一个查询为真，则加载文件。
全部查询都不为真，则不加载。例子如下：
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:
800px), projection" href="800wide-portrait-screen.css" />
这里有两点需要注意。第一，媒体查询之间使用逗号分隔。第二，你会注意到在projection 之后，没有 and ，也没有任何特性/值的组合。没有后续表达式，意味着只要是 projection 就满足条件。本例中，样式会应用于所有的投影仪。
还可以在 CSS 样式表中使用媒体查询。例如，将下面的代码插入样式表，在屏幕宽度小于等于 400像素的设备上， h1 元素的文字颜色就会变成绿色。
@media screen and (max-device-width: 400px) {
h1 { color: green }
}
还可以使用 CSS的 @import 指令在当前样式表中按条件引入其他样式表。例如下面的代码会给视口最大宽度为 360像素的显示屏设备加载一个名为 phone.css 的样式表。
@import url("phone.css") screen and (max-width:360px);
切记，使用 CSS 的 @import 方式会增加 HTTP 请求（这会影响加载速度） ，所以请谨慎使用该方法。
2.2.2 媒体查询能检测哪些特性
创建媒体查询时，最常用的是设备的视口宽度（ width ）和屏幕宽度（ device-width ） 。
依我的经验，很少需要检测其他特性。但是，为方便查阅，下面列出了所有可供媒体查询检测的特性，希望其中有能让你心动的特性。
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-resolution: 300dpi 。还
可以接受每厘米像素点数的度量值，如 min-resolution: 118dpcm 。
scan ：电视机的扫描方式，值可设为 progressive （逐行扫描）或 interlace （隔
行扫描） 。 如 720p HD电视 （720p的 p即表明是逐行扫描） 匹配 scan: progressive ，而 1080i HD 电视（1080i中的 i表明是隔行扫描）匹配 scan: interlace 。
grid ：用来检测输出设备是网格设备还是位图设备。
在上述所有特性中， 除 scan和 grid之外， 都可使用 min 和 max前缀来创建一个查询范围。
例如，分析如下所示的代码片段：
@import url("phone.css") screen and (min-width:200px) and (max-width:360px);
这里对 width 应用了 min 和 max 来设定查询范围。 这样 phone.css 文件只会引入视口宽度介于 200像素至 360像素的显示屏设备。
2.2.4 加载媒体查询的最佳方法
Respond.js（https://github.com/scottjehl/Respond）是为 Internet Explorer 8及更低版本增加媒体查询支持的最快的 JavaScript工具，但它目前无法解析 CSS的 @import 命令。因此，建议在已有的样式表中追加媒体查询样式。使用如下语法即可在已有样式表中加入媒体查询：
@media screen and (max-width: 768px) {/*样式*/}
Cssreset:重置样式就是一组 CSS 声明，用来覆盖不同浏览器渲染 HTML 元素时
的各种默认样式。重置样式一般会被加入到主样式文件的开头，用来将
各个浏览器的自有默认样式重置成统一表现，确保样式表中后续追加的
样式在不同浏览器中有相同的显示效果。
2.4 阻止移动浏览器自动调整页面大小
iOS 和 Android 浏览器都基于 WebKit（http://www.webkit.org/）核心。这两种浏览器以及很多其他浏览器（如 Opera Mobile） ，都支持用 viewport meta元素覆盖默认的画布缩放设置。只需要在 HTML的 <head> 标签中插入一个 <meta> 标签。 <meta> 标签中可以设置具体的宽度（如像素值）或者缩放比例如 2.0（设备实际尺寸的两倍） 。下面是一个将页面放大到设备实际尺寸两倍显示的 meta 标签的示例：
<meta name="viewport" content="initial-scale=2.0,width=device-width" />
安装 iOS 模拟器和 Android 模拟器
虽然真机测试无可替代， 但还是可以使用Android和iOS模拟器。 Windows、
Linux和 Mac版的 Android模拟器都可以免费下载， Android软件开发工具
包（SDK）也可以免费安装。下载地址是 http://developer.android.com/sdk/。
不过得使用命令行安装，需要你有一颗勇敢的心 。iOS 模拟器是 Xcode
开发包（在 Mac App Store中免费下载）的一部分，只能在 Mac OS X上使
用。一旦安装了 Xcode，你就可以在这个路径下找到模拟器：~/Developer/
Platforms/iPhoneSimulator.platform/Developer/Applications iOS Simulator.app
我们来分析一下上面所示的 <meta> 标签，以理解它的工作原理。 name="viewport" 属性不言而喻。 content="initial-scale=2.0 的意思是将页面放大两倍（同理，0.5表示缩小一半，3.0表示放大 3倍） ，同时 width=device-width 告诉浏览器页面的宽度应该等于设备宽度.
<meta> 标签还可以控制页面可缩放的范围。下面的代码允许用户将页面最多放大至设备
宽度的 3倍，最小压缩至设备宽度的一半。
<meta name="viewport" content="width=device-width, maximum-scale=3, minimum-scale=0.5" />
你还可以禁止用户缩放，不过缩放是一个重要的辅助功能，所以在实践中很少禁用。
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
user-scalable=no 即是禁止缩放。
2.5 针对不同视口宽度修正设计
设置 viewport meta标签后，任何浏览器都不再缩放页面了，现在我们可以针对不同视口来修正设计效果。首先在 CSS中为平板设备（如 iPad）增加媒体查询，竖直 iPad的视口宽度是 768像素（横向视口宽度是 1024像素，此时页面渲染效果很理想） 。
@media screen and (max-width: 768px) {
#wrapper {
width: 768px;
}
#header,#footer,#navigation {
width: 748px;
}
}
2.6 响应式设计中内容始终优先
我们想让设计在多平台多视口的情况下保留尽可能多的内容（而不是使用 display:
none 或类似方法来隐藏部分内容） ，但也要意识到内容模块显示顺序的重要性。目前，页面中侧边栏和主内容区标签的顺序决定了侧边栏会显示在主内容区前面。显然，窄视口设备的用户应该先看到主内容，而后再看到侧边栏。
我们还可以（或许应该）将内容区移到导航区域之上。这样那些使用小视口设备的用户就可以先看到主内容。这样无疑是坚决贯彻“内容优先”原则的合理做法。但是，多数情况下每个页面顶部还是应该有导航区，所以我乐得只将 HTML代码中的侧边栏和内容区位置互换一下，让内容区出现在侧边栏之前。当前代码结构如下：
<div id="sidebar">
<p>here is the sidebar</p>
</div>
<div id="content">
<p>here is the content</p>
</div>
互换位置后的代码如下：
<div id="content">
<p>here is the content</p>
</div>
<div id="sidebar">
<p>here is the sidebar</p>
</div>
虽然我们互换了标签位置，但页面在大视口中的显示效果没有变化，因为侧边栏和内容区分别使用了 float:left 和 float:right 属性。但是在 iPad上，则变成了首先显示内容区，下面才是侧边栏。
2.7 媒体查询只是必要条件之一
3.拥抱流式布局
3.1 固定布局经不起未来考验
3.2 为什么响应式设计需要百分比布局
那些仅使用媒体查询来适应不同视口的固定宽度设计，只会从一组 CSS 媒体查询规则突变到另一组，两者之间没有任何平滑渐变。从我们在第 2 章的例子来看，当某个视口处于媒体查询设置的固定宽度范围之外 （可能是某种未知的未来设备及视口） ， 网页就需要水平滚动才能完整浏览。不过我们想要的是一个灵活的设计，能在所有视口中都完美显示，而不仅仅只针对媒体查询设定的一些固定视口。
3.3 将网页从固定布局修改为百分比布局
我们在图片编辑软件中点击一下文字对象，查看其具体尺寸（一般单位是像素） ，然后将其写入对应的 CSS代码。那我们如何将固定尺寸转换为相对尺寸呢？
3.3.1 需要牢记的公式
目标元素宽度÷上下文元素宽度=百分比宽度
3.3.2 设置百分比元素的上下文
3.4 用 em 替换 px
过去的几年里，网页设计师使用 em替代 px主要是为了文字缩放。因为老版本的 InternetExplorer无法缩放像素单位的文字。 不过现代浏览器很久以前就支持缩放以像素为单位的文字了。那用 em 替换 px 还有什么必要性或优越性呢？有两点显而易见的理由：一是那些使用 Internet Explorer 6的用户也将能够缩放文字，二是这样做可以使我们设计师和开发者的生活更简单。em 的实际大小是相对于其上下文的字体大小而言的。如果我们给<body> 标签设置文字大小为 100%，给其他文字都使用相对单位 em，那这些文字都会受body 上的初始声明的影响。这样做的好处就是，如果在完成了所有文字排版后，客户又提出将页面文字统一放大一点， 我们就可以只修改 body 的文字大小， 其他所有文字也会相应变大。
同样， “目标元素尺寸÷上下文元素尺寸=百分比尺寸”这个公式也适用于将文字的像素单位转换为相对单位。值得注意的是，现代浏览器的默认文字大小都是 16像素（显式声明的除外） 。因此一开始给 body 标签应用下列任何一条规则所产生的效果都一样：
em 究竟是什么？
em是书面形式的大写字母“M”的简称，发音和 M相同。以前， “M”
常被用来测定某种字体的大小，因为它是英文字母中最大（最宽）的字
母。如今，em 作为一个测量单位，指的是特定字母的宽度和高度相对
于特定字体磅值的比例。
3.5 弹性图片
在现代浏览器（包括 IE 7+）中要实现图片随着流动布局相应缩放非常简单。只需在 CSS中作如下声明：
img {
max-width: 100%;
}
这样就可以使图片自动缩放到与其容器 100%匹配。更进一步，可以将同样的样式应用到其他多媒体标签上。如：
img,object,video,embed {
max-width: 100%;
}
这些多媒体元素都可以自动缩放了。但是，对于采用的 <iframe> 显示视频的网站（比如YouTube） ，这个技术还不行，我们会在第 4 章解决这个问题。眼下，还是专注于图片的缩放问题吧，因为不论何种多媒体元素，原理都是相通的。
使用这种方法有几个需要斟酌的问题。第一，要提前准备一张足够大的图片，以备大视口使用。但这也就引出了第二个，同时也是非常重要的问题，即无论视口多大，什么设备，都得下载超大图片。可能对某些设备来说，图片大小只要原始图片的 25%就好了。另外，在某些情况下，你还不得不因此而考虑带宽限制。我们呆会儿再说第二个问题，先把图片缩放问题说完。
3.5.1 让图片随视口缩放
示例网站的侧边栏有一组电影海报，其中两部是好电影，两部是烂电影（不在此处讨论这个话题） 。对应的标签结构如下：
3.5.2 为特定图片指定特定规则
可以像下面代码所示的那样给每个图片追加一个额外的 class：
<img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt Earp" />
然后，为其宽度设置一个特定的规则。另外，我们还可以保留图片标签不变，利用 CSS
规则的针对性，用一个更具体的规则覆写侧边栏图片已有的 max-width样式：
img {
max-width: 100%;
}
.sideBlock img {
max-width: 45%;
}
下图展示了侧边栏当前的显示效果：
3.5.3 给弹性图片设置阈值
现在图片可以随着视口的伸缩而缩放了。但是如果将视口拉大，直到图片拉伸至超出其原始尺寸，那问题就麻烦了。看看下图所示的 1900像素宽的视口中奥斯卡图片的显示效果：
oscar.png图片的实际宽度是 202像素。 但在超过 1900像素宽的视口中， 图片也被拉大了，其显示宽度超过了 300像素。我们可以通过追加另一个特定样式来为图片设置阈值：
.oscarMain {
float: left;
margin-top: -28px;
width: 28.9398281%; /* 698 ÷ 202 */
max-width: 202px;
}
这样就可以保证 oscar.png 按照通用的图片样式自由缩放，但又绝不会超出 max-width
属性设置的最大上限。
3.5.4 超级全能的 max-width 属性
另一种限制页面无限制扩张的方法是给最外层的 #wrapper div 设置 max-width 属性，
如下所示：
#wrapper {
margin-right: auto;
margin-left: auto;
width: 96%; /* Holding outermost DIV */
max-width: 1414px;
}
这样意味着页面会缩放至视口宽度的 96%，但绝不会超过 1414 像素宽（设置为 1414 像素，是因为在这个宽度下大多数浏览器恰好能剪切出完整的角旗，而不会留个半边） 。
显然这些方法仅是备用选项。但它证明了流动布局的灵活性，也说明了如何通过几个特定声明来控制文档流。
3.6 为不同的屏幕尺寸提供不同的图片
现在我们可以让图片完美缩放，而且也知道了如何限制特定图片的显示尺寸。但在这章的前面我们曾指出图片缩放存在一定的问题。图片尺寸必须比其显示尺寸更大以保证渲染效果，否则的话图片可能看起来很糟糕。基于这个原因，图片文件的体积就永远比实际显示所需的大。
很多人都在研究这个问题，尝试为较小的屏幕尺寸提供较小的图片。第一个著名的例子是 Filament Group的 “响应式图片” （http://filamentgroup.com/lab/responsive_images_experi_
menting_with_context_aware_image_sizing/） 。不过最近，我已经转而使用 Matt Wilcox 的“自适应图片” （http://adaptive-images.com）了。Filament Group的解决方案需要对图片标签做一定修改。Matt Wilcox的解决方案则不需要，而且他的方案会根据标签中已经设定的全尺寸图片自动创建各种尺寸的图片。这种解决方案允许基于一组屏幕尺寸断点，根据用户需要为其提供不同的图片。接下来我们就看一看如何利用该技术实现图片自适应。
自适应图片方案默认为此创建的目录是 assets
3.7 流动网格布局和媒体查询的默契配合
在本章的前面，我们的导航链接在特定的视口宽度下回折成两行。我们可以使用媒体查询来修正这个问题。如果导航链接在 1060像素下散得太开而在 768像素下显示正常（我们之前的媒体查询做好了处理） ，我们就给这个视口范围设置一下字体样式：
@media screen and (min-width: 1001px) and (max-width: 1080px) {
#navigation ul li a { font-size: 1.4em; }
}
@media screen and (min-width: 805px) and (max-width: 1000px) {
#navigation ul li a { font-size: 1.25em; }
}
@media screen and (min-width: 769px) and (max-width: 804px) {
#navigation ul li a { font-size: 1.1em; }
}
你看到了，我们根据视口宽度来改变文字大小，结果就是这组导航链接在 769 像素到无穷大的视口中都会显示在一行。这是媒体查询和流动布局和谐共存的又一证据：媒体查询约束流动布局的变动范围，而流动布局则简化了从一组媒体查询样式过渡到另一组的改变过程。
