移動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、動效