談談響應式佈局

今天在這裏就略微談一下響應式佈局吧,想必你們都知道響應式佈局已經在這個移動端爲主流的時代成爲了避不開的話題之一,接下來咱們從小到大來談談響應式網頁設計的基本原則.

爲何?

爲何須要響應式設計,想必這點不說你們都能想到答案.如今是一個移動爲先的時代,咱們要是將PC端的網頁照搬到移動端所行就會出現不少尷尬的情形,好比:

1. 主要內容沒法第一時間呈現的用戶面前

2. 用戶須要麻煩的縮放操做才能看到頁面的一小部分

3. 手機點擊沒法正確點擊到正確的按鈕

4. ....

這些都會對咱們的用戶移動體驗形成很差的影響致使咱們用戶的流失.因此響應式網頁爲了解決如上的問題就出現了.

是什麼

響應式網頁設計(Resposive web design)也被稱爲RWD,或者咱們稱爲自適應網頁設計,是一種網頁設計的技術作法.
雖然咱們前面說到的是移動端,可是概念上,RWD目的是使網站能在多種瀏覽設備上閱讀和導航,同時減小縮放,平移和滾動.
接下來咱們開始學習下響應式網頁設計中須要的知識吧.

viewport

這個是咱們必需要知道的,就和下面這段html代碼同樣
<meta name="viewport" content="width=device-width, initial-scale=1.0">
什麼是viewport?
viewport就是用戶網頁的可視區域,而viewport隨着設備的變化,在移動端上會小於PC端.
在平板電腦和移動電話出現以前,網頁值須要根據電腦屏幕設計便可,如今可就不一樣了,在移動端上PC端的設計會太大以致於沒法適應viewport,而一般爲了解決這個問題,瀏覽器會自動的縮小了網頁並顯示在移動端上.
咱們以前寫的那段<meta>標籤又表明着什麼呢?
一個<meta name="viewport">標籤表明着一份如何控制頁面大小與縮放的說明書.width=device-width這部分就和字面意思同樣將頁面寬度設置爲設備寬度,而initial-sacle=1.0則是設置爲初始縮放比例爲1.0,若是不設置將會在切換橫屏時保持以前的頁面寬度.

像素與DIP與pixel ratio

咱們須要理解一下像素和DIP(device independent pixel,設備獨立像素),假設咱們有一臺2560px寬的設備,若是咱們DIP爲1280,則咱們的pixel ratio爲2.咱們的瀏覽器並非根據物理硬件的寬度而工做的,而是根據DIP寬度工做的,它將像素與實際距離關聯起來.
這部分咱們就到此爲止吧,稍做了解就好哦.

媒體查詢(Media Query)

媒體查詢(Media Query)這也是咱們談到響應式不得不談的一部分,媒體查詢是什麼呢,正如咱們下面所寫的代碼這樣就是所謂的媒體查詢了.
media screen and (min-width:500px) and (max-width:600px)
這裏給個MDN的傳送門

媒體查詢的使用方式

<!-- link元素中的CSS媒體查詢 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 樣式表中的CSS媒體查詢 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

媒體查詢包含一個媒體類型和至少一個相似(max-width: 500px)限制範圍表達式.在mdn上詳細的介紹,在響應式佈局中咱們只要記住screen and ()[and ()]這種形式就能夠了.

斷點(Breakpoints)

在媒體查詢中咱們設置了不一樣的樣式,經過不一樣的寬度變化來更改應用的樣式,而這個樣式變化的條件(臨界點)就是咱們這裏所談的斷點了,斷點的設置對於咱們響應式設計是十分重要的,在這裏我根據網上的資料總結一下斷點如何設置.
首先,咱們設計響應式網頁要移動爲先,意思就是咱們要先設計移動端上的網頁,而後再在寬度逐漸增加的狀況下慢慢尋找本身心中的斷點,並進一步設計寬度更大狀況下的網頁佈局,從mobile->tablet->PC,逐步設計,也是所謂的漸進加強.

柵格設計(grid)和彈性盒(Flex box)

grid,咱們最多見的一種響應式設計的模式,它將頁面分割爲一個個動態網格,而且在寬度變小的狀況下會順延到下一格,咱們常見的使用了grid的範例如bootstrap等都十分的簡單易用.
而flex box正是目前最熱門的,而且被各瀏覽器強烈推薦的一種模式,可是在使用前首先咱們要確保咱們作好了各個瀏覽器的兼容,包含了全部版本的瀏覽器引擎前綴.關於flex box,能夠看看我這篇博文.

怎麼作?常見的模式

1. 大致流動模型(mostlyfluid)

2. 掉落列模型(column drop)

3. 活動佈局模型(layout shifter)

4. 畫布移除模型(off canvas)

掉落列模型(column drop)

最小視窗模式時,咱們三個內容塊每個都佔據一行,而且隨着寬度的增長,到達斷點時,則前兩個內容塊一塊兒佔據一行,再根據寬度增長,到達斷點時,則三個內容塊一塊兒佔據一行而且開始隨着寬度的增長而再也不延伸,從而變爲增長外邊距.

大致流動模型(mostly fluid)

這與掉落列模型類似,可是更像grid.
最小視窗模式時,咱們內容塊每一個都與掉落列模型(column drop)同樣每個都佔據一行,隨着寬度的增長,列出現並把二三塊一塊兒佔據一行,而後隨着寬度的增長咱們能夠展現多個列,並在最後斷點時,寬度固定而且隨着寬度增長而增長外邊距.

活動佈局模型(Layout Shifter)

能夠說是最靈活的佈局模型,咱們不是單純的更改重排到其餘列下方,而是能夠更改模塊的順序.也就是使用order屬性.

畫布溢出模型(off canvas)

簡單來講就是將不經常使用的導航或菜單放在畫布以外,如導航欄變爲按鍵.

實例

1. Column Drop
   http://codepen.io/thewindswor...

2. Mostly Fluid
   http://codepen.io/thewindswor...

3. Layout Shifter
   http://codepen.io/thewindswor...

4. Off Canvas
   http://codepen.io/thewindswor...

小結

以上咱們已經將響應式入門的東西都談過一遍了,大致上都能根據以上模式本身進行一些小示例的開發了,馬上動手吧.