響應式佈局上篇

響應式佈局

響應式佈局

什麼是響應式佈局 如何實現響應式佈局常見的視口尺寸

在Sass中使用媒體查詢

 

什麼是響應式佈局

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

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

一個典型的響應式佈局網站：http://www.16ketang.com/ 試着逐漸縮小該頁面的窗口，看看網頁有什麼變化

如何實現響應式佈局

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

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

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

 

下面是一個簡單的媒體查詢的例子：

 

 

 

 

上面的代碼應該這樣閱讀：

1. 有一個樣式規則 .item
2. 若是當前的視口尺寸大於等於1200px，則再加入一個樣式規則 .item
3. 若是當前的視口尺寸大於等於992px，而且小於1200px，則再加入一個樣式規則 .item

能夠想象，若是視口的尺寸當前是1500px，則頁面中會存在兩個類樣式 .item ，一個想將背景設置爲紅色，一個想將背景設置爲藍色，固然，此時就會進入層疊的規則解決衝突，那就是CSS的基礎 知識了。這裏主要是要說明，媒體查詢中的樣式規則，會根據視口大小來決定要不要啓用這些規

則。

響應式佈局的原理，正是大量的使用媒體查詢，讓頁面中一些元素在不一樣的視口中具備不一樣的樣式表現。

 

常見的視口尺寸

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

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

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

視口尺寸和設備關係表

 

視口	設備
≥1200px	大屏幕：投影儀 電視 PC端
≥992px && <1200px	中等屏幕：上網本、小型筆記本

 

≥768px && <992px	小屏幕：平板
<768px	超小屏幕：手機

 

根據上述的關係表，再結合你網站的實際狀況，就能夠很容易的得出你須要編寫的媒體查詢代碼。好比，個人網站只考慮兩種狀況：

1. 手機端顯示一種風格
2. 其餘設備共享一種風格

那麼對某個須要響應式佈局的元素，個人CSS代碼應該相似下面的格式：

 

 

在Sass中使用媒體查詢

開發一個實際的項目時，咱們一般會選擇一些預編譯器來處理咱們編寫的CSS源代碼，好比

SASS。不少預編譯器都對媒體查詢有很好的支持。

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

下面以一個例子，說明在SASS中是如何使用媒體查詢的：

 

 

編譯爲：