demo總結

最近在模仿做一個點擊打開鏈接這樣的demo，整個過程中學習了很多東西，現在總結如下：

1.動態設置font-size結合rem實現自適應佈局

          a.動態獲取屏幕的width和height，並計算出它們與設計稿（這個demo以iPhone5的尺寸爲原始尺寸320x568px）寬高的比例，取兩個比例的最小值（scale）。

        b.原始font-size爲100px，新的font-size爲：sacle*100px；

        c.所有元素尺寸單位使用rem，rem是相對於根元素文本大小的一個相對單位。

     var sacle = Math.min(window.innerWidth / baseWidth, window.innerHeight / baseHeiht),//獲取寬、高比的最小值
         newSize = parseInt(sacle * 10000 * baseFontSize) / 10000;//新的font-size爲最小比與原始font-size的乘積

2.容器元素的居中處理

        容器元素的居中處理由相對與左上角的定位，改爲相對於屏幕中心定位。以保證在不同的屏幕尺寸下，容器元素仍然居中。

                                   

     position: absolute;
     left: 100px;
     top: 50px;

 變爲

     position: absolute;
     left: 50%;
     top: 50%;
     margin-left: -50px;
     margin-top: -50px;

3.動畫的嵌套
           1.很多元素以一個整體動畫效果出現，然後各個元素分別擁有各自的動畫，可以分兩種方式處理：

         a.子元素很少時，可以將整體動畫效果寫入各自的animation中：

      .sec1_qq 
     {
         -webkit-animation: fadeIn 1s, shake 1.5s 1s infinite;//首先1s動畫出現，然後shake。shake動畫延遲相應的時間。
         animation: fadeIn 1s, shake 1.5s 1s infinite;
      }

          b.子元素較多時，使用一個容器元素將共同出現的元素包裹。將公用動畫放在容器元素中。

        2.關於transform

        transform是一個屬性，後面的賦值會覆蓋掉前面的值。

        解決方法：使用一個容器元素將動畫元素嵌套，將animation分解到容器元素和動畫元素上。

4.使用margin-top後，父元素隨之移動
         設置元素的margin-top後，父元素的位置和子元素一起移動

       解決方法：將父元素的overflow設置爲hidden。

5.雪碧圖
        對於使用雪碧圖的元素，它的尺寸一定要儘量準確，不然在不同尺寸下會顯示出其他的圖像。

iPhone5下正常顯示：                                                         ipad下顯示出了其他部分圖像： 

                                                                           

6.命名篇

       剛開始錯誤的做法：

       a.  只顧當前頁面。比如在第一個section中對標題命名爲title，那麼接下來的五個section的標題就要各種混亂。

       b.  簡單的使用一些名詞，和內容沒有任何聯繫。

      正確做法：

       a.  在名稱中加入父元素的縮寫，比如：sec1_title,sec2_title。

       b.  對於需要讀入img的圖像，應該保持元素名稱和圖像名稱一定的關聯性，從而提高代碼的可讀性。

7.對於重複部分的模塊化

      在6個section中，有一個帶有星星閃爍的qq圖像出現了三次。對於這種重複性的效果，應該模塊化。在模塊內部對元素進行效果設置，避免對父級元素的定位等。

8.星星閃爍和翅膀揮舞不停效果

      通過對animation的持續時間和delay時間的不同設置產生了blingbling效果。

9.animate.css

     animate.min.css中已經定義好了很多動畫效果，https://github.com/daneden/animate.css 我們只需按照下面步驟使用：

    a.在html文件中引用animate.min.css

      b.將animated和相應的動畫名稱寫入到元素的類名。

      <h1 class="animated infinite bounce">Example</h1>

     也可以像使用自定義動畫一樣使用它們，編輯相應的屬性。

10.iSlider

     iSlider是一個表現出衆，無任何依賴的mobile設備滑動組件。 http://www.qianduan.net/islider-yi-dong-duan-webapp-hua-dong-di-zui-you-jie-jue-fang-an/ 按照以下步驟使用：

     a.準備一個dom節點用來存放slider

     b.準備好相應的數據

     c.調用的時候實例化