05CSS3的新特性

CSS3的新特性

一、CSS3介绍

CSS3是对CSS2.1的一个升级版，它是对CSS的一个扩展

二、CSS3的主要新特性

1. 选择器

2. 阴影

3. 形状转换（2D<->3D）

4. 变形

5. 动画（过渡动画、帧动画）

6. 边框

7. 多重背景

8. 反射

9. 文字

10. 颜色（RGBA/HSL/HSLA）

11. 滤镜

12. 弹性布局

13. 多列布局

14. 盒模型

15. web字体

16. 媒体查询

三、CSS3局限性

CSS3不是所有浏览器或同一浏览器的不同版本都支持，所有需要做兼容性处理， 通常的做法：加上厂商的前缀

1、主流浏览器内核

• Trident：IE内核

• Webkit：Chrome和Safari内核

• Gecko:FireFox内核

• Blink：Chrome和Opera内核

Tips(技巧)：

目前国内的浏览器大多数都是双核的（IE内核+Chrome内核）

2、厂商前缀

• IE: -ms-

• Chrome&Safari: -webkit-

• FireFox: -moz-

• Opera: -o-

四、响应式布局

1、响应式布局概念

Responsive Design，在实现不同屏幕分辨率的终端上浏览网页的不同展示方式

通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验

2、响应式布局和自适应布局的区别

• 响应式布局只开发一套代码，通过检测视口的分辨率，针对不同的客户端在客户端做代码处理，来展示不同的布局和内容

• 自适应布局需要开发多套界面，通过检测视口的分辨率，来判断当前访问的设备是PC端、手机端还是iPad等，从而请求服务层，返回不同的页面

• 响应式布局等同于流动网格布局，而自适应等同于使用固定分割点类进行布局

• 自适应布局给出了更多的设计空间，只用考虑几种不同的状态就可以了，而响应式布局则需要考虑上百种不同的状态，虽然有些状态差异较小，但也要考虑

3、响应式布局开发实现方法

• 媒体查询

• 百分比布局

• rem布局（相对于根节点（元素）html中的字号布局）

• 视口单位布局（vw/vh）

4、响应式设计步骤

• 设置meta标签

• 通过媒体查询来设置样式

• 设置多种视图的宽度

  1.宽度需要使用百分比/rem/vw&vh等

  2.处理图片缩放

  3.其他属性处理（如：pre/iframe/video等，都需要缩放其大小）