H5頁面適配所有移動端，用rem設置樣式

（提示：本篇文值供本人意會記憶。很多術語不準確，避免誤導萌新，請移步其他大佬的教程）

1.在Index.html文件裏：

用js動態設置html的font-size：

2.在樣式文件裏：（css/less）

因爲默認是1080爲基準，如果設計圖是以width:360px設計。

則： 應寫爲：width:10.8rem (相當於1px = 0.03rem)

******************注意背景圖片的設置，這三句最好當做固定語句一起寫，不然圖片就會emmmmm：

background-image: url(./NewYearBanner.png);
background-repeat:no-repeat; 
background-size:100% 100%;

3.如果頁面內容超過屏幕高度（默認情況下：整個page設置爲高度自適應=>height:auto）

在最後的板塊部分，首先在最外層設置一個wrap，設置爲彈性佈局。然後利用padding-bottom屬性，把頁面顏色撐開.

 

 

實例：這樣空白的顏色就會被撐滿，就能達到所有移動端兼容了！