HTML5CSS3实战笔记
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML5+CSS3响应式布局笔记
第一章：HTML5,CSS3响应式布局入门
响应式布局：流式设计，弹性布局... 指针对任一设备对网页内容进行完美布局的一种显示机制。
视口：指浏览器窗口内的内容区域，不包含工具栏，标签栏等。
CSS3是在CSS2基础上按模块构建的，以CSS2.1标准为核心。
实现响应式设计的关键技术是CSS3—媒体查询。
响应式布局的条件：CSS3的媒体查询，流动布局。
原则：让设计在多平台多视口的情况下保留尽可能多的内容，而不是使用display：none隐藏它。
可以通过调整标签的先后顺序来显示大小屏内容顺序问题。
第二章：媒体查询，支持不同的视口
html4中的媒体查询：
加载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元素覆盖默认的画布缩放设置。
设置初始化缩放比例：
还可以控制页面的缩放范围：
设置用户禁止缩放：
第三章：拥抱流式布局
流式布局+媒体查询匹配CSS = 完美的页面设计
固定像素宽度转换对应的百分比宽度：
目标元素宽度/上下文元素宽度=百分比宽度
依照规则把像素宽度改为百分比宽度
em替换px （为了字体缩放）
现代浏览器默认字体大小为16px
max-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 script
HTML5文档类型以简洁的方式告诉浏览器用“标准模式”渲染页面。
用lang属性来制定页面元素内容和元素属性值的主语言
HTML5中可以没有结束标签的斜线，没有引号，大小写混杂。
在标签中限制可以嵌入多个元素。但是不能在面嵌套另一个标签，也不能嵌套表单
HTML5中常见的非保留废弃零件有strike,enter,font,acronym,frame和frameset.
HTML中常用的新标签:
文本级语义元素行内标签：
：给文本加粗，吸引读者注意力。
:强调内容中的重点。
:显示为斜体效果，表示与上下文有差异的地方。
遵循WAI-ARIA实现无障碍站点：
ARIA的地标角色：
application:用于定义用做网页应用的区域。
banner:用来定义一个站点级别（而不是某个特定文档）的区域。如网站的头部和logo。
complementary：用来定义域页面主要内容相关的信息区域。例如页脚的网站版权信息区域。
form：表单区域，如果表单用于搜索请使用search来替代。
main：定义页面的主体内容。
navigation：用于定义链向当前文档或者相关文档的导航链接。
search：用来定义一个用于搜索的区域。
关于HTML5中使用媒体文件：
提供备用的媒体源文件：