響應式的實現總結

響應式的實現總結

實現響應式沒有絕對的方法，下面是幾個籠統的辦法：

1. 通過rem實現響應式佈局

rem單位都是相對於根元素html的font-size來決定大小的。因此，如果通過rem來實現響應式的佈局，只需要根據視圖容器的大小，動態的改變font-size即可。

function refreshRem() {
    var docEl = doc.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);

2. flex彈性盒子佈局

3. 媒體查詢

• 設置meta標籤
  大多數移動瀏覽器將HTML頁面放大爲寬的視圖（viewport）以符合屏幕分辨率。你可以使用視圖的meta標籤來進行重置。下面的視圖標籤告訴瀏覽器，使用設備的寬度作爲視圖寬度並禁止初始的縮放。在標籤里加入這個meta標籤。

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

（user-scalable = no 屬性能夠解決 iPad 切換橫屏之後觸摸才能回到具體尺寸的問題。 ）

• 媒體查詢

4. 百分比佈局

5. vw/vh 視寬單位

這裏說下媒體查詢，每個媒體查詢都會增加維護的成本，應避免濫用，下面是一些避免不必要的媒體查詢的建議

• 使用百分比或視口單位取代固定長度。
• 當需要在較大分辨率下得到固定寬度，使用max-width而不是width
• 不要忘記爲替換元素(比如Img、video等)設置一個max-width,值爲100%
• 假如背景圖片需要完整地鋪滿一個容器，不管容器的尺寸如何變化， background-size: cover 這個屬性都可以做到。
• 當圖片（或其他元素）以行列式進行佈局時，讓視口的寬度來決定 列的數量。彈性盒佈局（即 Flexbox）或者 display: inline-block 加上常規的文本折行行爲，都可以實現這一點。
• 在使用多列文本時，指定列寬而不是列數，這樣它就可以在較小的屏幕上自動顯示爲單列布局。

總結

總的來說，實現響應式的思路是盡最大努力實現彈性可伸縮的佈局，並在媒體查詢的各個斷點區間內指定相應的尺寸。