响应式Web设计：HTML5和CSS3实战 笔记

1、常用媒体查询特性： 　　

　　A、width：视口宽度。 height：视口高度 　　

　　B、device-width：渲染表面的宽度（设备屏幕的宽度）。device-height：渲染表面的高度（设备屏幕的高度）。 　　

　　C、orientation：检查设备处于横向还是纵向。 portrait | landscape

2、用百分比布局创建流动的弹性界面，同时用媒体查询来限制元素的变动范围。将这两者组合到一起构成了响应式设计的核心。

3、用em设置文字大小时，元素的行高是相对于其本身的文字大小而言。

4、在现代浏览器（包括 IE 7+）中要实现图片随着流动布局相应缩放只需声明：img {max-width: 100%;}就可以使图片自动缩放到与其容器 100%匹配。

5、给图片设置弹性宽度后，要设置阈值。

6、结构元素

　　<section>元素用来定义文档或应用程序中的区域（或节）。例如，组织个人信息，联系信息，新闻动态等。

　　<article>元素用来包裹独立的内容片段、能作为一个整块被复制粘贴到另外一个完全不同的网站且能保持完整的意义，比如博客正文

　　<aside>元素用来表示与页面主内容松散相关的内容，侧边栏、引文、广告以及导航元素（如友情链接等）。

　  每个<article>或<section>元素都可以有自己的头部、脚注和导航。

7、语义元素： <b>关键词、产品名称、文章导语 ； <em>强调内容中的重点。

8、用table布局设置导航可以保证如果有另外的列表项追加进来，会自动地调整它们之间的间距。

9、CSS3 nth 规则 ：nth-child(n)、 :nth-last-child(n)、 :nth-of-type(n)、 :nth-last-oftype(n)。  n=1表示第一项

10、CSS3 要求对伪元素使用两个冒号以便与伪类进行区别。但 Internet Explorer 8 及更低版本的 IE 无法识别两个冒号的语法，它们只识别一个冒号。 

11、HSL 模式基于一个 360°的色相环，第一个数字代表色相， 60°时为黄色， 120°时为绿色， 180°时为青色， 240°时为蓝色， 300°时为洋红色， 360°时为红色。

　　后两个值分别表示饱和度和亮度（0全黑  100%全白） 。版本 9 以下的 IE 浏览器不支持 RGB 和 HSL。

12、opacity设置的透明度会对整个元素产生影响（元素的内容都会透明）。使用 HSLA或 RGBA 则可以仅让元素的某些部分有透明效果。

13、浮雕文字效果：不要模糊，不要水平阴影，仅在垂直方向设置 1 或 2 像素的“白影”即可。

14、CSS3过渡效果（transition）：transition-property：要过渡的 CSS 属性名称、

　　　　　　　　　　　　　　　　　transition-duration：定义过渡效果持续的时间、

　　　　　　　　　　　　　　　　　transition-timing-function：过渡期间速度如何变化（默认ease）、

　　　　　　　　　　　　　　　　　transition-delay：可选，用于定义过渡开始前的延迟时间。

15、CSS3变形（transform）： transform-origin 属性来修改变形效果的起点

　　　　　　2D：scale：用来缩放元素（放大或缩小 、translate：在屏幕上移动元素（上下左右四个方向）、

　　　　　　 　　rotate：按照一定角度旋转元素（单位度、顺时针）、skew：沿 X 和 Y 轴对元素进行斜切

16、CSS3动画：关键帧声明：@keyframes name {}、

　　　　　　　　动画属性（animation）：animation-name: 关键帧名字
　　　　　　　　　　　　　　　　　　　　animation-duration: 动画持续时间
　　　　　　　　　　　　　　　　　　　　animation-timing-function: 调数函数、默认ease
　　　　　　　　　　　　　　　　　　　　animation-iteration-count: 播放次数、infinite无数次
　　　　　　　　　　　　　　　　　　　　animation-delay: 动画延时。

17、渐进加强及优雅降级：

　　　　渐进增强以恪守 Web 标准的标签为基础，意味着它在所有浏览器中均可用。然后通过 CSS 样式和必要的 JavaScript 来为更先进的浏览器提供渐进式的增强体验。

　　　　优雅降级指的是为现代浏览器制作网站，然后保证为某些老版本浏览器提供基本可用的体验。新特性在老版本浏览器中会降级，且一般会有一个分界点，声明浏览器支持临界点。