前端常見的布局方式 —— 自適應布局

所謂自適應布局，從頁面上展示出來，就是字體、盒子大小隨着視口 viewport的大小變化而變化。

依賴於 單位 rem 的運用。

首先引入一段JS代碼，這段代碼負責調解html中 font-size 字體的大小變化，讓字體隨窗口的增大而增大

(function flexible (window, document) {
    let docEl = document.documentElement
    let dpr = window.devicePixelRatio || 1

    // adjust body font size
    function setBodyFontSize () {
        if (document.body) {
            document.body.style.fontSize = (12 * dpr) + 'px'
        }
        else {
            document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10
    function setRemUnit () {
        let rem = docEl.clientWidth / 10
        docEl.style.fontSize = rem + 'px'
    }

    setRemUnit()

    // reset rem unit on page resize
    window.addEventListener('resize', setRemUnit)
    window.addEventListener('pageshow', function (e) {
        if (e.persisted) {
            setRemUnit()
        }
    })

    // detect 0.5px supports
    if (dpr >= 2) {
        let fakeBody = document.createElement('body')
        let testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) {
            docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
    }
}(window, document))

接着設置網頁寬度等於屏幕寬度（width=device-width），原始縮放比例為1.0

 <meta name="viewport" content="width=device-width, initial-scale=1" />

接下布局字體、盒子單位使用rem就OK了。

這里稍微提一下，響應式布局與自適應布局的一些差異。

1、自適應布局是通過檢測視口分辨率來判斷當前訪問的設備是pc端還是平板或者是手機，從而請求服務層返回不同的頁面；
響應式布局是通過檢測視口分辨率針對不同客戶端在客戶端做代碼處理，來展現不同的布局和內容
2、自適應布局需要開發多套界面，而響應式布局只需要開發一套界面就可以了
3、自適應對頁面做的屏幕適配是在一定范圍：比如pc端一般要大於1024像素，手機端要小於768像素，而響應式布局是一套頁面全部適應。
4、自適應布局如果屏幕太小會發生內容過於擁擠，響應式布局可以自動識別屏幕寬度並作出相應的調整頁面設計

響應式布局是自適應的升華，融合了（流式布局+自適應）的特點