移動端頁面佈局

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

一、移動端頁面須要在頭部添加

<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1.0,initial-scale=0.5,user-scalable=no" />

二、移動頁面的佈局方式

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

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

可是，這樣作可能會致使變形，像素變化時，頁面模塊的寬高比例會變形，對於圖片來講，也有可能致使變形，圖片設置橫向百分比，縱向會自動等比例縮放，若是父級元素高度固定，裏面的img就會出現變形（壓縮或者拉伸）的問題。

（2）響應式佈局

咱們可使用一些流行起來的框架進行響應式佈局，有BootStrap框架等；咱們也可使用css3屬性，@media screen,經過媒體查詢，對不一樣的手機像素各寫一套代碼，這種方式後期維護起來很麻煩。

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

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

這個必須添加一個樣式

 

html(font-size:百分比;)

 

百分比的設定使用rem更方便，例如html { font-size:62.5% } 那麼1rem就等於10px，百分比的設定給本身提供了方便。

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

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

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

在項目css中(注意不要被公共的base、common之類的影響了，資源加載順序也是蠻重要的)，先把html的fontSize設置爲 100px（或者加上媒體查詢代碼）, 避免加載未完成時候樣式錯亂;

此時1rem=100px

css:

 

html {font-size:100px;}

 

js:

(function ($, window) {
        window.addEventListener('DOMContentLoaded', function () {
            var shuping = 'onorientationchange' in window ? 'orientationchange' : 'resize';
            var timer = null;

            //設置字體
            function setFontSize() {
                var w = document.documentElement.clientWidth || document.body.clientWidth;
                document.documentElement.style.fontSize = parseInt(100 * w / 設計稿的寬度) + 'px';
            }
            setFontSize();
            window.addEventListener(shuping, function () {
                clearTimeout(timer);
                timer = setTimeout(setFontSize, 300);
            }, false);
        }, false);
    })($, window);

參考：https://segmentfault.com/a/1190000003690140