什么是響應式布局？
響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。 響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用“大勢所趨”來形容也不為過。
響應式布局的優缺點？
- 優點：
- 面對不同分辨率設備靈活性強
- 能夠快捷解決多設備顯示適應問題
- 缺點
- 兼容各種設備工作量大，效率低下
- 代碼累贅，會出現隱藏無用的元素，加載時間加長
- 其實這是一種折衷性質的設計解決方案，多方面因素影響而達不到最佳效果
- 一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況
響應式布局的設計
在面對不同的尺寸的設備時怎樣鑒別呢？我們需要用到CSS3的媒介查詢技術（Media Query）
什么是媒體查詢？
媒體查詢包含一個可選的媒體類型和零或多個表達式來限制使用媒體特性的樣式表范圍,例如width,height,color.CSS3中的Media queries讓內容的呈現可以只針對特定范圍的輸出設備而不必去改變內容本身.
媒體查詢級別較高，不在html之下，所以用相對單位對其進行設置都是相對于瀏覽器設置的。
基本寫法：
@media all and(min-width:800px) and (orientation:
landscape){
...
}
媒體查詢的邏輯操作符
and not only , 就是鏈接表達式
and：與 全部匹配
,：或 任意條件匹配一個
not：非
only：防止老舊的瀏覽器，不支持帶媒體屬性的查詢，而應用到給定的樣式
媒體查詢
媒體查詢
媒體查詢
媒體屬性簡介
-
width：視口寬度 -
height：視口高度 -
device-width：渲染表面的寬度，就是設備屏幕的寬度 -
device-height：渲染表面的高度，就是設備屏幕的高度 -
orientation：檢查設備處于橫向還是縱向 -
aspect-ratio：基于視口寬度和高度的寬高比。 width/height 如：16/9,4/3 -
device-aspect-ratio：渲染表面的寬度，就是設備屏幕的寬度 -
color：每種顏色的位數bits 如：min-color：16位 8位 -
resolution：檢測屏幕或打印機的分辨率
以上屬性都可以添加min-或max-前綴
視口viewport
什么是視口？
視口是與設備相關的一個矩形區域，坐標單位是與設備相關的。
為了小屏幕（手機）的顯示，將視口分為以下狀態以達到顯示目的
- 布局視口(layout viewport)：用一個虛擬的960px寬度或更高 先把網頁布局出來 寬度不變
- 可視視口(visual viewport)：在手機呈現出來的區域的寬度 會通過用戶的縮放等操作進行改變
- 理想視口(ideal viewport)：布局視口在一個設備上的最佳尺寸 為構建手機瀏覽器優化的頁面而添加的
例如百度首頁對視口的設置
<meta name='viewport' content='width=device-width,//使用理想視口
minimum-scale=1.0,//最小縮放比例
maximum-scale=1.0,//最大縮放比例
user-scalable=no'/>//禁用用戶縮放
響應式圖片
在網站設計中，針對于手機端的設計使用大屏幕的圖片會造成流量的浪費以及加載的緩慢，這顯然有著不好的用戶體驗，針對這種情況，而提出了響應式圖片的概念和解決方法
- 通過js或服務端解決：
通過js判斷屏幕大小，在不同分辨率的情況下加載不同的屏幕 - srcset配合sizes
<img class='image' src='img/480.png'
srcset='img/480.png 470w, img/800.png 800w, img/1600.png 1600w'
sizes='50vw'>
詳細參考：響應式圖片srcset全新釋義
- picture標簽
<picture>
<source media="min-width:36em"
srcset="img/pic-s.jpg 768w"/>
<source
srcset="img/pic.jpg 1800w"/>
</picture>
這是一個尚在開發中的功能，詳細請查看MDN,針對該標簽兼容問題可用該插件解決picturefill
- svg矢量圖
響應式網站的設計原則
- 內容流動：隨著屏幕尺寸變小，內容將會占據更多的垂直空間，而下方的內容就會被接著往下推，這就是所謂的流動。
- 使用相對單位：畫布大小可以是desktop、mobile或是它們之間的任何尺寸。像素密度也可以有所不同，所以我們需要靈活的、在各種屏幕上都可以使用的單位。
- 斷點：不要根據某一特定手機種類進行斷點設置，而是根據大體的屏幕分類像素分類進行設置。如：0-480為小屏幕 481-800為中屏幕等
- 最大值或最小值：有時候，如果內容占據了屏幕的整個寬度是很好的，比如在移動設備上。但是如果是在電視屏幕上，相同的內容，占據了你的屏幕整個的寬度，通常就意義不大了。這就是Min/Max值發揮作用的時候了。
本文目的旨在記錄學習當中所遇到的重要知識點，所以難免疏漏或者錯誤，歡迎指正討論
