HTML5CSS3实战笔记

HTML5CSS3实战笔记
HTML5CSS3实战笔记

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://https://www.360docs.net/doc/2d15997650.html,/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

(https://www.360docs.net/doc/2d15997650.html,);?Less Framework (https://www.360docs.net/doc/2d15997650.html,);

?1140 CSS Grid (https://www.360docs.net/doc/2d15997650.html,);

?Columnal (https://www.360docs.net/doc/2d15997650.html,)。

第四章:响应式中的HTML5

对于一些老版本的IE可以使用腻子脚本(polyfill)来弥补遇到的所有缺陷。enabling script

HTML5文档类型以简洁的方式告诉浏览器用“标准模式”渲染页面。

用lang属性来制定页面元素内容和元素属性值的主语言

HTML5中可以没有结束标签的斜线,没有引号,大小写混杂。

标签中限制可以嵌入多个元素。但是不能在面嵌套另一个标签,也不能嵌套表单

HTML5中常见的非保留废弃零件有strike,enter,font,acronym,frame和frameset.

HTML中常用的新标签: