移动web前端开发高效实战（二）

CSS3

检测浏览器是否支持html5和css3的方法：
方法一：

用javascript获取到浏览器的 User Agent，然后根据User Agent判断浏览器是否支持某个属性；
方法二：
在javascript里面使用指定的属性，然后进行判断，如果成功执行，则说明支持。

而目前比较流行的Modernizr使用的就是第二种

1、CSS3新增特性

总述：新增特性有以下几点：

（1）CSS选择器
（2）新的颜色制式和透明设定
（3）多栏布局的实现
（4）多背景图效果
（5）文字阴影效果
（6）开放的网络字体类型
（7）圆角
（8）边框背景图片
（9）盒子阴影
（10）媒体查询
（11）自适应布局calc属性
（12）个性化字体

1.1 新增选择器
详情见API

1.2 伪类和微元素
伪类：DOM中不存在，但在用户中确是可以看到的
伪类：

动态伪类–>:link,：visited，：hover，：active，：focus
目标伪类–>:target
语言伪类–>:lang
ui元素状态伪类
结构性伪类–>:nth-child…..
否定伪类—>:not

伪元素：

::before
::after

1.3 优先级和权重
内联>id>类、伪类、属性选择器>元素、伪元素
！important在这几个之上，最高，不过不建议用，会打乱布局

2、响应式开发

2.1 屏幕像素
基本概念：

物理像素：设备的像素点，不可变，类似于一个物理的小方框
独立像素：逻辑像素，用于定义ui的像素，可以理解为，我们所开发的过程当中，所理解的像素，
屏幕像素比：物理像素和独立像素的比值；

屏幕像素比越高的手机显示效果越好，例如视网膜屏幕意思识两个物理像素显示一个独立像素，所以可操作性更强
2.2 flex布局
结构图：

概念：采用flex布局的容器，所有的子元素自动成为容器成员，成为flex项目。

flex容器属性：

2.3 媒体查询
媒体查询主要不同屏幕的展示效果上，根据屏幕大小的不同展示不同的效果，
写法：

@media screen and (min-width:640px){}
意思是这些css在屏幕尺寸为640px以上展示

2.4 rem响应式开发
rem布局，在页面中动态设置根元素的大小，然后再页面的元素大小中，使用rem单位，在页面大小发生变化时候，动态设置页面个元素的大小。主要用在web手机端上。

(function () { 
        // 获取根元素对象，既HTML
        var de = document.documentElement;
        // 重置根元素的字号大小
        function resetFontSize() {
            // 获取浏览器宽度
            var w = de.getBoundingClientRect().width;
            // 设置一个最大宽度，避免在iPad等设备下过渡放大
            if (w > 640) w = 640;
            // 为根元素字号赋值
            de.style.fontSize = (w / 10) + 'px';
        }
        // 页面一加载就为根元素字号赋值
        resetFontSize();
        // 页面大小改变时，重新设置根元素字号
        window.addEventListener('resize', resetFontSize, false);
    })();
</script>

注意：字体一般用px；容器中的元素一般是百分比做法。
2.5 多列布局
column属性，可以设置多列的各种属性；

3、动效