關於響應式佈局和自適應佈局

是什麼：

• 什麼是自適應佈局：同一張網頁自動適應不一樣大小的屏幕，根據屏幕寬度，自動調整網頁內容大小。
  
• 什麼是響應式佈局：能夠自動識別屏幕寬度、並作出相應調整的網頁設計，佈局和展現的內容可能會有所變更。
  
• 區別：若是網頁內容過多，總體會顯得擁擠。因此響應式佈局是自適應佈局的改進，佈局和展現的內容可能會有所變更。
  

例如：網頁在屏顯300~600~900~1200四個階段的佈局與內容（https://mediaqueri.es/）：

​

爲何：

• 屏幕顯示器的分辨率愈來愈多樣化，在pc端和手機端須要作樣式上的平衡，若是每一個屏顯都須要一套獨立的網頁或者樣式，會加大工做量
• 單純使用meta-viewport雖然能夠解決部分問題，可是單純的進行縮放，達到的平衡點，用戶體驗不佳

例如：攜程有pc版和手機版，在pc端擬化手機效果：

segmentfault網站的響應式佈局：

若是想要更好的用戶體驗，建議使用響應式佈局

怎麼作：

• 容許網頁寬度自動調整
  

<meta name="viewport" content="width=device-width, initial-scale=1" />
// viewport是網頁默認的寬度和高度
// 網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）爲1.0
// 即網頁初始大小佔屏幕面積的100%複製代碼

兼容：https://code.google.com/archive/p/css3-mediaqueries-js/

• 儘可能少使用絕對寬度：使用百分比進行佈局
  
• 相對大小的字體：字體也不能使用絕對大小（px），而只能使用相對大小（em）或者高清方案（rem）,rem不侷限於字體大小，前面的寬度width也能夠使用，代替百分比
  
• 流動佈局（fluid grid）：各個區塊的位置都是浮動的，不是固定不變的
  
• 選擇加載CSS：
  

　　<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)"
　　href="tinyScreen.css" />
    或者：
    @import  url("tinyScreen.css") screen and (max-device-width: 400px);
複製代碼

• CSS的@media規則（媒體查詢）
  

@media  screen and (max-device-width: 400px) {
　　　　.column {
　　　　　　float: none;
　　　　　　width:auto;
　　　　}

　　　　#sidebar {
　　　　　　display:none;    
　　　　}

　　}
複製代碼

• 圖片的自適應（fluid image）
  

img { max-width: 100%;}複製代碼

參考：Bootstrap的柵格佈局：

柵格佈局：

響應式類名：