移動優先的響應式布局

[1]設計原則

[2]三要素

[3]優缺點

[4]響應模式

前面的話

　　随着移動網際網路的興起，不同裝置的分辨率相差較大，如果在不同的設定上顯示同一個頁面，則使用者體驗差。響應式網頁設計是一種方法，使得一個網站能夠相容多個終端，而不用為每個終端制作特定的版本。它使得一個網站可以在任何類型的螢幕上，都可以被輕松地浏覽和使用。采用響應式設計，在不同裝置中，網站會重新排列，展現出不同的設計風格，以完美的适配任何尺寸的螢幕

設計原則

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

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

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

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

　　由簡入繁易，由繁入簡難。如果是桌面優先，布局端是桌面端代碼，隻有在media中，才是手機端代碼，加載了多餘的桌面端代碼。如果是圖檔檔案，則下載下傳的無用資源更多

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

三要素

　　響應式設計包括三個要素：彈性布局、媒體查詢和彈性圖檔

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

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

　　是以，最簡單的響應式圖檔設定max-width為100%即可

img{
  max-width: 100%;  
}      

　　隻有一張圖檔的情況下，采用上面代碼即可。如果提供了高清圖，要根據裝置大小加載不同的圖檔，則需要額外的處理。有如下幾種處理方式

　　1、采用picture元素，IE浏覽器、android4.4.4-浏覽器不相容

<picture>
  <source media="(min-width:50em)" srcset="img/l.jpg">
  <source media="(min-width:30em)" srcset="img/m.jpg">
  <img src="img/s.jpg" alt="#">
</picture>      

　　2、采用img元素的srcset和sizes屬性，IE浏覽器、android4.4.4-浏覽器不相容

<img
  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(){
    var width = $(window).width();
    var img = $('.content img');
    if(width <=480){
        img.attr('src','img/480.png');
    }else if(width <=800){
        img.attr('src','img/800.png');
    }else{
        img.attr('src','img/1600.png');
    }
}
$(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 抽屜式】

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

好的代碼像粥一樣，都是用時間熬出來的