移動優先的響應式佈局

時間 2019-11-16

標籤移動優先響應佈局欄目無線简体版

原文原文鏈接

前面的話

　　隨着移動互聯網的興起，不一樣設備的分辨率相差較大，若是在不一樣的設置上顯示同一個頁面，則用戶體驗差。響應式網頁設計是一種方法，使得一個網站可以兼容多個終端，而不用爲每一個終端製做特定的版本。它使得一個網站能夠在任何類型的屏幕上，均可以被輕鬆地瀏覽和使用。採用響應式設計，在不一樣設備中，網站會從新排列，展示出不一樣的設計風格，以完美的適配任何尺寸的屏幕前端

設計原則

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

　　漸進加強(progressive enhancement)，是指基本需求獲得知足、實現，再根據不一樣瀏覽器及不一樣分辨率設備的特色，利用高級瀏覽器下的新特性提供更好的體驗。好比，圓角、陰影、動畫等後端

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

　　移動優先的響應式佈局採用的是漸進加強原則，製做響應式網站時，先搞定手機版，而後再去爲更大設備去設計和開發更復雜的功能。特徵是使用min-width匹配頁面寬度。從上到下書寫樣式時，首先考慮的是移動設備的使用場景，默認查詢的是最窄的狀況，再依次考慮設備屏幕逐漸變寬的狀況佈局

　　由簡入繁易，由繁入簡難。若是是桌面優先，佈局端是桌面端代碼，只有在media中，纔是手機端代碼，加載了多餘的桌面端代碼。若是是圖片文件，則下載的無用資源更多優化

　　不管從界面設計仍是代碼執行效率的角度而言，移動優先都有明顯優點動畫

三要素

　　響應式設計包括三個要素：彈性佈局、媒體查詢和彈性圖片網站

　　彈性佈局和媒體查詢已經在其餘博客中詳細介紹，下面來重點介紹下彈性圖片spa

　　彈性圖片，也稱爲響應式圖片，是指圖片可以跟隨父容器寬度變化而變化，同時寬度受限於父容器，不可按照圖片原始尺寸展示設計

　　所以，最簡單的響應式圖片設置max-width爲100%便可

img{
  max-width: 100%;  
}

　　只有一張圖片的狀況下，採用上面代碼便可。若是提供了高清圖，要根據設備大小加載不一樣的圖片，則須要額外的處理。有以下幾種處理方式

　　一、採用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>

　　二、採用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"
/>

　　三、採用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);