【學習】如何製作手機端html模板（REM的實際應用）

標籤：最好   螢幕   顏色   viewport   dev   nbsp   a標籤   ble   initial   

以前製作手機頁面時，總是很迷茫，不知從何著手，頁面也不知如何處理。會用一些百分比啊，媒體查詢啊，還有就是目測了，但是各種手機端的螢幕適配是個老大難的問題，沒有做到百分百相容的。自從發現了rem這個好東西，並且聽了一位有經驗同事的講解，頓時豁然開朗，現在對於手機端的頁面開發，可以說胸中有一點丘壑了。rem最能打動我的地方在於，他不會改變原來在PC端的代碼書寫習慣，只是把計量單位換了一下，所以迫不及待的擁抱他了！

具體用法貼出如下：

1、html文檔（當然是html5）的頭部添加一個meta標籤聲明：

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

其作用是讓當前viewport的寬度等於裝置的寬度，同時不允許使用者手動縮放。

2、引入最新版本的jQuery庫檔案

3、加入下面這段jquery代碼：

         var deviceWidth=$(window).outerWidth();

         if(deviceWidth>640){

             $("html").css("font-size","100px");            

         }else{

             $("html").css("font-size",deviceWidth/640*100+‘px‘);     

         }

代碼一看就懂，意思是螢幕寬度大於640時，設定rem的基準為100px，反之，則為螢幕寬度除以640再乘上100。這樣就實現了響應式效果，不用費力的寫媒體查詢了。

4、拿到設計切好需要的圖片

5、按製作PC端頁面的方式書寫頁面，把px換成rem，因為前面定的1rem=100px,所以原來以px為單位的資料全部向前移動兩位小數點。

6、背景圖的設定：背景圖引入後，必須加上background-size：橫向rem，縱向rem，其中的數字就是切圖的尺寸，換算成rem，這個尤為重要，只要有背景圖就一定要加上，平鋪的背景圖（repeat），也是同樣的寫切下來那部分的數值。

7、特殊注意：字型大小font-size，邊框大小、圓角邊框的大小，這些最好還是用px來寫。

這裡我經過實際檢驗，其實字型大小用px和rem都可以，但是1px的邊框就不要寫成0.01rem了，在手機上根本看不到，所以還是寫border：1px  solid  #顏色。

是不是小於0.1 rem的數字就不要用了，用回px，因為實在太小，這個還得實際檢驗一下。 

以上就是基本用法，當然了，手機端的開發，根據實際頁面的複雜程度，會有各種意想不到的問題，不會像上面寫的就這麼簡單，所以，還是要多多練習，積累實戰經驗。

【學習】如何製作手機端html模板（REM的實際應用）