HTML5+CSS3响应式布局笔记第一章：HTML5,CSS3响应式布局入门响应式布局：流式设计，弹性布局... 指针对任一设备对网页内容进行完美布局的一种显示机制。
视口：指浏览器窗口内的内容区域，不包含工具栏，标签栏等。
CSS3是在CSS2基础上按模块构建的，以CSS2.1标准为核心。
实现响应式设计的关键技术是CSS3—媒体查询。
响应式布局的条件：CSS3的媒体查询，流动布局。
原则：让设计在多平台多视口的情况下保留尽可能多的内容，而不是使用display：none隐藏它。
可以通过调整标签的先后顺序来显示大小屏内容顺序问题。
第二章：媒体查询，支持不同的视口html4中的媒体查询：<link rel=“stylesheet” media=“screen and (orientation:portrait)” href=“xx.css”/>加载CSS的四种方法：行内，内链，外链，import。
其中import会增加css请求，影响速度。
@import url(“phone.css”) screen and (max-width:媒体查询可以检测到如下特性，但最常用的是视口宽度（width）和屏幕宽度（device-width）:width:视口宽度。
height:视口高度。
device-width:屏幕宽度。
device-height:屏幕高度。
orientation:检查设备处于横向还是纵向。
aspect-ratio:基于视口宽度和高度的宽高比。
如16：9写为aspect-ratio:16/9.device-aspect-ratio:设备屏幕的高宽比。
color:每种颜色的位数。
例如min-color:16会检测设备是否拥有16位颜色。
color-index:设备的颜色索引表中的颜色数。
值为非负整数。
monochrome:检测单色帧缓冲区中每像素所使用的位数。
值为非负整数，比如monochrome:2。
resolution:用来检测屏幕或打印机的分辨率。
如min-resolution:300dpi或min-resolution:300dpcm。
scan:电视机的扫描方式，值可设为progressive(逐行扫描)或interlace(隔行扫描)。
grid:用来检测输出设备是网格设备还是位图设备。
以上除了scan和grid都可以使用min，max创建一个查询范围。
Respond.js(https:///scottjehl/Respond)是为Internet Explorer 8 及更低版本增加媒体查询支持的最快的JavaScript 工具,但它目前无法解析CSS 的@import命令。
因此, 建议在已有的样式表中追加媒体查询样式。
使用如下语法即可在已有样式表中加入媒体查询:@media screen and (max-width: 768px) {/*样式*/}阻止移动浏览器自动调整页面大小：ios与android浏览器都基于webkit，还有很多其他浏览器，都支持viewport meta元素覆盖默认的画布缩放设置。
设置初始化缩放比例：<meta name=“viewport” content=“initial-scale=1.0,width=device-width”/>还可以控制页面的缩放范围：<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" />第三章：拥抱流式布局流式布局+媒体查询匹配CSS = 完美的页面设计固定像素宽度转换对应的百分比宽度：目标元素宽度/上下文元素宽度=百分比宽度依照规则把像素宽度改为百分比宽度em替换px （为了字体缩放）现代浏览器默认字体大小为16pxmax-width:为了让媒体标签可以缩放，需给他们加一行：img,object,video,embed{max-width:100%;}之后需要把该标签上的width，height属性删了。
为了限制页面无限扩张，可以把最外层div加上max-width:1414px;css网格系统：下面是一些对响应式设计提供了不同程度支持的CSS 框架:❑Semantic (http://semantic.gs); ❑Skeleton();❑Less Framework ();❑1140 CSS Grid ();❑Columnal ()。
第四章：响应式中的HTML5对于一些老版本的IE可以使用腻子脚本（polyfill）来弥补遇到的所有缺陷。
enabling scriptHTML5文档类型以简洁的方式告诉浏览器用“标准模式”渲染页面。
用lang属性来制定页面元素内容和元素属性值的主语言HTML5中可以没有结束标签的斜线，没有引号，大小写混杂。
在<a>标签中限制可以嵌入多个元素。
但是不能在面嵌套另一个<a>标签，也不能嵌套表单HTML5中常见的非保留废弃零件有strike,enter,font,acronym,frame和frameset.HTML中常用的新标签:<section><nav><article><aside><hgroup> 其中<section>意为节，<nav>可用于导航区域，<article>与<section>类似，但它更强调独立，<hrounp>如果文中有<h1><h2>等标题副标题可以将他们包起来。
以上标签被记入大纲结构。
<header>,<footer>不计入大纲结构，还有<address>文本级语义元素行内标签：<b>：给文本加粗，吸引读者注意力。
<em>:强调内容中的重点。
<i>:显示为斜体效果，表示与上下文有差异的地方。
遵循WAI-ARIA实现无障碍站点：ARIA的地标角色：application:用于定义用做网页应用的区域。
banner:用来定义一个站点级别（而不是某个特定文档）的区域。
如网站的头部和logo。
complementary：用来定义域页面主要内容相关的信息区域。
例如页脚的网站版权信息区域。
form：表单区域，如果表单用于搜索请使用search来替代。
main：定义页面的主体内容。
navigation：用于定义链向当前文档或者相关文档的导航链接。
search：用来定义一个用于搜索的区域。
关于HTML5中使用媒体文件：<video src=“myVideo.mp4” width=“640” height=“480” controls autoplay preload=“auto” loop poster=“myVideo.jpg”> This is a video</video>提供备用的媒体源文件：<video width="640" height="480" controls autoplaypreload="auto" loop poster="myVideoPoster.jpg"><source src="video/myVideo.ogv" type="video/ogg"><source src="video/myVideo.mp4" type="video/mp4">What, do you mean you don't understand HTML5?</video>如果想让video和audio元素做为响应式，只需要删除width和height属性，然后在CSS中追加 video{max-width:100%;height:auto}这种方法不能解决使用iframe嵌入的视频的响应问题。
最简单的方法是用FitVids的jQuery的小插件。
方法如下：$(document).ready(function(){$(“#content”).fitVids();});第五章：CSS选择器，字体和颜色模式CSS3中的多栏布局：colimn：暂时需要给多栏布局使用私有前缀。
column-width：分栏宽度column-count:分栏数column-gap:栏位间隙宽度column-rule:分割线样式CSS3新增属性器及其用法：属性选择器img[alt=“oscar”]字符串匹配的属性选择器：img[alt^=“file”]img[alt*=“file”]img[alt$=“file”]HTML5中允许id首字母为数字。
CSS3伪类：:last-child:first-childAG:<nav><ul><li><a>1</a></li><li><a>2</a></li><li><a>3</a></li><li><a>4</a></li></ul></nav>CSS: nav{display:table}nav ul{display:table-row}nav ul li {display:table-cell}这样做可以保证如果有另外的表项追加进来，同样会自动地调整他们之间的间距。
最后，使用CSS3选择器将最后一个列表项的文字置为右对齐，将第一个列表项的文字置为左对齐nav ul li:last-child{text-align:right}nav ul li:first-child{text-align:left}nth规则：:nth-child(n):nth-last-child(n):nth-of-type(n):nth-last-of-type(n)其中n可以使用odd和even 或者3n+1等形式注意：CSS3的计数方式和jQuery不一样，CSS从1开始，jQuery从0开始。