移動端佈局基礎

最近iphone7一下出了兩款尺寸的手機，致使的移動端的屏幕種類更加的混亂，設計圖以前以320*2爲設計基準，如今通常以375*2爲設計基準。javascript

另外各類品牌的android機混亂了市場，加上最近新出的win系統。css

解決之道

固定寬度作法

A:直接在header裏寫死<meta name="viewport" conent="width=375,user-scalable=no">，頁面單位直接以px爲基準html

優勢：開發方便，設計圖用ps量下直接就能夠寫上去單位html5

缺點：太多了，例如在小寬度手機上出現橫向滾動屏，大手機上出現白邊，1px像素處理等等java

響應式佈局

A:用媒體查詢語句在320,375爲界限處進行適配處理android

          寫法：@media only screen and (min-width: 750px) and (max-width: 640px) {
                          ...
                    }
                    @media and screen(max-width: 640px) {
                                    ....
                    }
                    @media and screen(min-width: 750px){
                            ...
                     }less

優勢：頁面處理稍微更精細些iphone

缺點：最多的缺點就是css查詢語句寫的比較多，且開發速度較慢佈局

rem方案

本人使用過兩種方式，都還不錯字體

1.腳本動態計算

html {font-size: 50px;}
/* javascript */

!(function(win, doc){
    function setFontSize() {
        // 獲取window 寬度
        // zepto實現 $(window).width()就是這麼幹的
        var winWidth =  window.innerWidth;
        // doc.documentElement.style.fontSize = (winWidth / 640) * 100 + 'px' ;
        
        // 2016-01-13 訂正
        // 640寬度以上進行限制 須要css進行配合
        var size = (winWidth / 640) * 100;
        doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ;
    }
 
    var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
    
    var timer = null;
 
    win.addEventListener(evt, function () {
        clearTimeout(timer);
 
        timer = setTimeout(setFontSize, 300);
    }, false);
    
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            clearTimeout(timer);
 
            timer = setTimeout(setFontSize, 300);
        }
    }, false);
 
    // 初始化
    setFontSize();
 
}(window, document));

2.用現成的flexible.js的解決方案，較推薦，畢竟是淘寶大廠的，能夠參考大漠的文章

flexible.js: http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html,另外就是使用的時候看狀況須要改下js代碼裏的配置項，咱們是以750爲設計基準的，摺合最大7.5rem,有相同的只需改

這裏，另外，須要注意的是字體大小建議使用px的方式，用less/scss中的mixin進行處理。

優勢：太多

缺點：暫未發現

強大的單位——vw

html {
    font-size: 31.25vw; /* 表達式：100*100vw/320 */
}

兼容性問題比較大，沒用過，沒太多的發言權