結構層媒體響應式

通常在我們手機訪問網頁時,請求的圖片可能還是加載了與桌面端瀏覽器相同的大圖,文件體積大,消耗流量多,請求延時長。媒體響應式要解決的一個關鍵問題就是讓瀏覽器上的展示媒體內容尺寸根據屏幕寬度或屏幕分辨率進行自適應調節。當然這裡提到的媒體主要是指圖片,即我們需要根據瀏覽器設備屏幕寬度和屏幕的分辨率來加載不同大小尺寸的圖片,避免在移動端上加載體積過大的資源。

結構層響應式

這裡至少要了解兩個方面的內容:響應式佈局和屏幕適配佈局。

響應式佈局

響應式佈局是根據瀏覽器寬度、分辨率、橫屏、豎屏等情況來自動改變頁面元素展示的一種佈局方式,一般可以使用柵格方式來實現,實現思路有兩種:一種是桌面端瀏覽器優先,擴展到移動端瀏覽器適配;另一種則是以移動端瀏覽器優先,擴展到桌面端瀏覽器適配。由於移動端的網絡和計算資源相對較少,所以一般比較推薦從移動端擴展到桌面端的方式進行適配,這樣就避免了在移動端加載冗餘的桌面端CSS樣式內容。

屏幕適配佈局

屏幕適配佈局則是主要針對移動端的,由於目前移動端設備屏幕大小各不相同,屏幕適配佈局是為了實現網頁內容根據移動端設備屏幕大小等比例縮放所提出的一種佈局計算方式。屏幕適配佈局又分兩種解決方案，zoom屬性控制方案和REM屏幕適配方案。

行為層響應式

在頁面的響應式設計中，行為層腳本也是需要根據瀏覽器環境來執行不同邏輯的，和結構層類似，行為層的響應式同樣氛圍JavaScript內容在前端引入和在後端引入這兩種情況。對於前一種情況，我們主要可以通過設備瀏覽器環境判斷來異步加載不同的JavaScript腳本，這裡不做過多講解。

---

分享到:

---

閱讀更多 前端小白說 的文章

關鍵字: 編程語言 JavaScript 設計

---