響應式佈局

1.概念

響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站可以兼容多個終端，而不是爲每一個終端作一個特定的版本。

這個概念是爲解決移動互聯網瀏覽而誕生的。

響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，並且隨着目前大屏幕移動設備的普及，愈來愈多的設計師採用這個技術。

（雖然咱們通常不使用響應式佈局，也不喜歡使用響應式佈局，但終究會在某些地方用到。）

2.如何實現響應式佈局

因爲響應式佈局要針對不一樣的視口尺寸，對樣式做出更多更繁雜修改，所以並不像流式佈局那樣讓寬度自動適應那麼簡單。

實現響應式佈局最核心的技術就是使用媒體查詢（media selector）。

媒體查詢是CSS3引入的概念，是指針對不一樣的設備、不一樣的視口尺寸，使用不一樣的樣式代碼。

其中：1200px通常爲pc端的視口寬度

使用@media screen and （最大/最小-width:數值）{內容}

這能夠解決一個問題：

那就是不一樣視口寬度下，頁面顯示格式相近不一樣，顯得更加多元化一些。

3.常見的是口尺寸

雖然你如今知道了如何使用媒體查詢，但咱們真正關心的，是頁面在手機、平板、上網本或小型筆記本、PC端等等中具備更好的表現力。

但問題是手機型號衆多，其餘設備也是如此，它們的尺寸不盡相同，咱們如何來斷定當前的視口尺寸屬於什麼設備呢？

好在通過大量的實踐應用，開發者已經總結了一套廣泛的適用規則，按照這套規則，你就能夠將視口尺寸和具體設備對應起來。

 

根據上述的關係表，再結合你網站的實際狀況，就能夠很容易的得出你須要編寫的媒體查詢代碼。

其實：通常狀況下，咱們的網站只考慮兩種狀況：

1. 手機端顯示一種風格

2. 其餘設備共享一種風格

因此只須要選擇是>768px，仍是<768px的寬度就能夠了，是否是簡單化了一些？

提示：開發一個實際的項目時，咱們一般會選擇一些預編譯器來處理咱們編寫的CSS源代碼，好比SASS。不少預編譯器都對媒體查詢有很好的支持。

Sass 中 @media 指令與 CSS 中用法同樣，並且還增長了一點額外的功能：容許其在 CSS 規則中嵌套。若是 @media 嵌套在 CSS 規則內，編譯時，@media 將被編譯到文件的最外層，包含嵌套的父選擇器。這個功能讓 @media 用起來更方便，不須要重複使用選擇器，也不會打亂 CSS 的書寫流程。

Sass使用事例：

它在CSS中將會被編譯爲：

是否是特別方便？