移動端頁面布局

關於移動端頁面的總結，最近接觸移動端頁面，簡單的介紹幾種頁面布局吧，以後繼續補充。

1、移動端頁面需要在頭部新增

2、移動頁面的布局方式

（1）橫向百分比，縱向畫素值

可以採用百分比（相對度量單位）進行盒模型橫向屬性（width、左右內邊距、左右外邊距）的製作，使用em（相對度量單位）實現文字的處理。但盒模型縱向上還是使用固定畫素作為單位。

但是，這樣做可能會導致變形，畫素變化時，頁面模組的寬高比例會變形，對於來說，也有可能導致變形，設定橫向百分比，縱向會自動等比例縮放，如果父級元素高度固定，裡面的img就會出現變形（壓縮或者拉伸）的問題。

（2）響應式布局

我們可以使用一些流行起來的框架進行響應式布局，有bootstrap框架等；我們也可以使用css3屬性，@media screen,通過**查詢，對不同的手機畫素各寫一套**，這種方式後期維護起來很麻煩。

（3）使用em或rem單位設定元素的寬高度

現在最流行的是使用rem單位進行開發，rem是依賴於根元素計算的單位。

這個必須新增乙個樣式

html(font-size:百分比;)

百分比的設定使用rem更方便，例如html 那麼1rem就等於10px，百分比的設定給自己提供了方便。

這個會出現乙個問題，假如說margin設定了1rem，螢幕變化時，margin的距離不會變化，空隙看起來會變大或變小，與周圍元素的比例就會不對稱，可能會跟設計圖之間有出入。

（4）響應式的使用rem單位

使用一段js動態的設定html的font-size屬性。

在專案css中(注意不要被公共的base、common之類的影響了，資源載入順序也是蠻重要的)，先把html的fontsize設定為 100px（或者加上**查詢**）, 避免載入未完成時候樣式錯亂;

此時1rem=100px

css:

html

js:

(function
($, window) 
setfontsize();
window.addeventlistener(shuping, 
function
() , 
false
);        }, 
false
);    })($, window);

參考：