移動優先的響應式布局

隨著移動網際網路的興起，不同裝置的解析度相差較大，如果在不同的設定上顯示同乙個頁面，則使用者體驗差。響應式網頁設計是一種方法，使得乙個**能夠相容多個終端，而不用為每個終端製作特定的版本。它使得乙個**可以在任何型別的螢幕上，都可以被輕鬆地瀏覽和使用。採用響應式設計，在不同裝置中，**會重新排列，展現出不同的設計風格，以完美的適配任何尺寸的螢幕

關於響應式設計，有漸進增加和優雅降級兩個設計原則

漸進增強(progressive enhancement)，是指基本需求得到滿足、實現，再根據不同瀏覽器及不同解析度裝置的特點，利用高階瀏覽器下的新特性提供更好的體驗。比如，圓角、陰影、動畫等

優雅降級(graceful degradation)則正好相反，現有功能已經開發完備，但需要向下相容版本和不支援該功能的瀏覽器。雖然相容性方案的體驗不如常規方案，但保證了功能可用性

移動優先的響應式布局採用的是漸進增強原則，製作響應式**時，先搞定手機版，然後再去為更大裝置去設計和開發更複雜的功能。特徵是使用min-width匹配頁面寬度。從上到下書寫樣式時，首先考慮的是移動裝置的使用場景，預設查詢的是最窄的情況，再依次考慮裝置螢幕逐漸變寬的情況

無論從介面設計還是**執行效率的角度而言，移動優先都有明顯優勢

彈性布局和**查詢已經在其他部落格中詳細介紹，下面來重點介紹下彈性

彈性，也稱為響應式，是指能夠跟隨父容器寬度變化而變化，同時寬度受限於父容器，不可按照原始尺寸展現

因此，最簡單的響應式設定max-width為100%即可

img

只有一張的情況下，採用上面**即可。如果提供了高畫質圖，要根據裝置大小載入不同的，則需要額外的處理。有如下幾種處理方式

1、採用picture元素，ie瀏覽器、android4.4.4-瀏覽器不相容

2、採用img元素的srcset和sizes屬性，ie瀏覽器、android4.4.4-瀏覽器不相容

src="
img/480.png
"srcset="
img/480.png 480w,img/800.png 800w, img/1600.png 1600w
"sizes="
(min-width:800px) 800px,100vw
"/>

3、採用js，根據window的resize事件，修改的路徑

function makeimageresponsive()
else
if(width <=800
)else
}$(window).on(
'resize load
',makeimageresponsive);

4、後端配置，前端傳遞給後端當前裝置的一些特徵，後端通過這些特徵決定做怎樣的響應。但目錄兩個後端響應式解決方案responsive_images和adaptive-images都不再維護

【優點】

1、減少工作量，**、設計、**、內容都只需要乙份

2、節省時間

3、解決了裝置之間的差異化展示

4、搜尋優化　

5、更好的使用者體驗

【缺點】

1、需要載入更多的樣式和指令碼資源，載入速度受到影響

2、設計比較難精確定位和控制

3、老版本瀏覽器相容不好

下面介紹四種響應模式

【column drop 列下沉】

手機上每乙個大塊單獨佔據一行，隨著螢幕尺寸拉伸會在同一行上形成多個 column 列

【mostly fulid 基本流體式】

基本上跟 column drop 一樣，但是有一點點「固定布局「的特點：當到達一定寬度後，主體內容部分不再變寬，成為固定寬度

【layout shifter 變換式】

變換式，也就是不必遵循原有內容順序，可以根據最佳展示需要來調整大塊順序

【off canvas 抽屜式】

抽屜式，螢幕不夠寬的時候，隱藏，通過按鈕呼出。足夠寬的螢幕上，始終顯示

移動優先的響應式布局

移動優先的響應式布局

移動優先的響應式布局

建立響應式布局 移動優先

相關推薦

建立響應式布局移動優先