HTML5CSS3实战笔记.docx

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(/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文档类型以简洁