響應式佈局

　　　　關於響應式佈局，個人理解是：html5/css3響應式佈局是利用css3的media媒體查詢功能。移動端通常都是對css3支持比較好的高級瀏覽器不須要考慮響應式佈局的媒體查詢media兼容問題。

　　　　一個普通的自適應顯示的三欄網頁，當你用不一樣的終端來查看這個頁面的時候，他會根據幾種終端來顯示不一樣的樣式，在電腦上是三列，在pad上應該也是 三列，在大屏手機上是三行，在屏幕小於320的手機上只顯示主要內容，隱藏掉了次要元素。（這裏關於響應式佈局還有個比較好的消息，就是拖動瀏覽器也能夠 觸發判斷條件，測試的時候你不須要去找一堆手機，只要把本身的瀏覽器窗口縮小到必定尺寸就能夠了。）

　　　　1.經過不一樣的媒介類型和條件定義樣式表規則。媒介查詢讓CSS能夠更精確做用於不一樣的媒介類型和同一媒介的不一樣條件。媒介查詢的大部分媒介特性都接受min和max用於表達」大於或等於」和」小於或等於」。如：width會有min-width和max-width媒介查詢能夠被用在CSS中的@media上，也能夠被用在HTML中。經過這個標籤屬性，咱們能夠很方便的在不一樣的設備下實現豐富的界面，特別是移動設備，將會運用更加的普遍。

　　　　2.經過使用百分比也能夠實現響應式佈局，這是一種比較簡單的方法，通常只須要使用百分號作出其相應的比度就能夠實現響應式的一種方法。

　　　　3.經過使用彈性盒子也能夠作出響應式佈局，在CSS3中的彈性盒子能夠很輕鬆的建立出一些自適應瀏覽器流動窗口的佈局或者是自適應字體大小的佈局。當容器的尺寸因爲屏幕大小或者窗口尺寸發生變化時，裏面的一些條目或者標籤也會被動態地調整。彈性盒子佈局並無內向的方向限制，能夠徹底由本身調試大小。

　　　　經過用戶研究，瞭解用戶使用的設備分佈狀況，肯定須要兼容的設備類型、屏幕尺寸。

　　　　設備類型：包括移動設備、手機、平板、和pc端。

　　　　屏幕尺寸：包括各類手機屏幕的尺寸（包括橫向和豎向）、各類平板的尺寸（包括橫向和豎向）、普通電腦屏幕和寬屏。

　　須要考慮的問題：

• 某個頁面進行響應式設計時其適用的尺寸範圍是哪些？好比，1688搜索結果頁面，跨度能夠從手機到寬屏，而1688首頁，因爲結構過於複雜，想直接遷移到手機上，不太現實，不如直接設計一個手機版的首頁。
• 結合用戶需求和實現成本，對適用的尺寸進行取捨。好比一些功能操做的頁面，用戶通常沒有在移動端進行操做的需求，沒有必要進行響應式設計。

　　　　針對肯定下來的幾個尺寸分別製做不一樣的線框原型，須要考慮清楚不一樣尺寸下，頁面的佈局如何變化，內容尺寸如何縮放，功能、內容的刪減，甚至針對特殊的環境做特殊化的設計等。

　　　　以上就是我本人對響應式佈局的一些理解。