# 彈性布局和彈性媒介 之前我們介紹過，響應式網站設計主要包括三部分：彈性布局、媒體查詢和彈性媒介。我們分別了解下這幾個。 ## 彈性布局 所謂的彈性布局，說的是在創建網站的時候，采用流體網格布局方式，動態地調整網站布局寬度以此來適應各種設備屏幕大小。 彈性布局不使用固定的測量單位，比如像素或者英寸。原因顯而易見，視窗（ viewport ）的高度和寬度在不同設備之間是不斷變化的，那么彈性網站布局為了適應這種變化，所以就不可能明確的指定網站內容的寬度和高度，只能使用相對長度單位。 那么怎么得到相對長度呢？ 響應式網站設計一詞的締造者 Ethan 給出了一個可靠的計算公式，可以用來確定彈性布局的比例值。 target / parent = result 上面這個公式的含義是，用一個元素的寬度（ target ）除以它的父元素的寬度（ parent ），那得到的計算結果（ result ）就是這個元素的相對寬度。 ## 流體網格 說到彈性布局，自然要提到流體網格（ fluid grid ）。流體網格使用相對長度單位，最常用的是百分比或 em 單位。流體網格的屬性值，比如 width、margin 或者 padding 都是用相對長度表示的。 接下來看一個應用上面流體網格公式的例子，如何把一個固定寬度的兩欄頁面轉變成一個彈性布局頁面。 <div class="container clearfix"> <div class="navbar">導航</div> <div class="content">內容</div> </div> 可以看下這個[案例](http://codepen.io/kinghs/pen/XNEOea)，一個父元素 main, 包含了兩個子元素，子元素 content 居左，另一個子元素 menu 居右。我們可以看下其中涉及的一些樣式： .container{ width:900px; } .content,.navbar{ margin:30px 20px; } .content{ width:600px; } .navbar{ width:210px; } 現在我們按照流體網格公式，把content和menu兩個區塊的寬度，以及他們的邊距用相對長度來表示，可以改寫成如下： .container{ width:80%; } .content{ width:66.66666667%; } .navbar{ width:23.33333333%;/*210/900=23.33333333*/ } .content,.navbar{ margin:3.33333333% 2.222222222%; } 修改之后的案例：[fluid grid2](http://codepen.io/kinghs/pen/mOxvKY) 注意，無論父元素 container 變得有多寬，content 和 navbar 區塊的寬度和頁邊距都會按比例縮放。你需要調整瀏覽器窗口的大小才能看到變化。知道了彈性布局的概念和流體網格計算公式，并將其運用起來，你就能創建一個完全動態的網站，網站內容按照視窗尺寸縮放。為了更好的掌控彈性布局，你也可以對 min-width、max-width、 min-height 和 max-height 屬性值采用相對長度單位。 ## 彈性媒介  雖然現在能創建一個動態的網站了，但是要達到完美，還需要做一些事情。比如說，網站中的圖片、視頻、Flash 動畫等等，在變為響應式的時候，就不能簡單的按照流體網格計算公式來變化了。 接下來說一說，響應式網站設計的另一重要部分，彈性媒介。網站上的圖片、視頻、Flash 等就是所謂的媒介。隨著瀏覽器窗口大小的改變，網站上媒介的布局不一定變得很合適，有時候它們會超出其容器的界限，當瀏覽器窗口變得比較小的情況下，這時頁面看起來會很糟糕。因此圖片、視頻和其它媒介類型應該具備可伸縮性，能根據瀏覽器窗口的大小，自動調整自身尺寸，保證頁面布局整齊一致。 讓圖片等媒介具有可伸縮性，一個簡單有效的方法，就是把它的 max-width 屬性值設置為 100%，意思是說它的最大寬度就是其容器的寬度。這樣就能確保當瀏覽器窗口變小的時候，則網站上的媒介會依據其容器的大小而縮小尺寸，始終包裹在容器內。代碼如下所示： img, video, canvas { max-width: 100%; } 可以看下這個案例：[fluid media](http://codepen.io/kinghs/pen/WozPWG) 另外，對于“彈性嵌入式媒介”，例如 iframe、video標簽相關的內容，上面的簡單方式就不靈了，這部分咱們就不詳細介紹了，感興趣可以參考這里的[ Flexible Embedded Media](http://learn.shayhowe.com/advanced-html-css/responsive-web-design/#media-queries) 介紹。 ## 相對長度單位 自從 CSS3 問世之后，相對長度家族成員也壯大起來，除了已有的 % 和 em 單位之外，新加入了 rem 單位，還增加了一組相對視窗長度單位如 vw、vh、vmin 和 vmax。目前瀏覽器對這些新加入成員的支持還不太好，所以它們還沒有普遍使用起來。下面簡單介紹一下 em、rem 還有百分比。 先聊聊 em 單位。em 是相對于其所在元素的字體而言的。 若使用 em 單位的元素定義了 font-size 為 12px，則此時 1em == 12px，那 2em == 24px；若沒有，則找其父元素的字體大小，依次類推直到 html 元素；若整個頁面沒有定義字體大小，而是使用瀏覽器默認字體大小 16px，則 1em == 16px。 這樣若某些 CSS 屬性使用了 em 單位，只要改變與其相關聯的字體大小，就能改變這些屬性值。 案例：[Em demo](http://codepen.io/kinghs/pen/rWvBrz) 再稍微說一下 rem（ root em 的簡寫 ），它與 em 相似，但 rem 僅僅是相對于 html 根元素的 font-size 而言的。這樣一旦設置了一個基本字體大小，定義其它長度就容易了，比 em 使用起來簡單。不足之處就是，牽一發而動全身。 對于百分比，就是根據 Ethan 的公式，得到的結果乘以 100%。既然對這三個相對長度單位有了一定了解，那在響應式網站中如何使用它們呢？ 一般而言，對于響應式網站，水平方向為流體網格布局，那寬度、左右間距和左右內邊距的長度自然采用百分比。像高度、上下間距，還有字體大小等與垂直方向相關的屬性則應該使用 em 或者 rem 單位。 ## Flexbox布局 為了適應各種類型的顯示設備和屏幕大小，在 CSS3 中添加了 Flexbox 特性，它是一個精巧的布局模塊，目的是為我們提供一種更加有效的彈性布局方式。 隨著響應式網站設計的興起，借助傳統的 CSS 工具創建彈性網站布局，是一件讓每個 web 開發者都感到痛苦的事情。而使用 flexbox，你就不用關心浮動、垂直居中、豎直居中等等與布局相關的問題了，而這些都是在以前創建一個網站時，必然會遇到的挑戰。 flex 布局的設計思想是這樣的，讓一個容器（ flex 容器）能夠自動調整容器內元素（子元素）的寬度、高度以及順序，并盡可能以最佳的方式來適應容器自身空間大小。也就是說，一個 flex 容器，當空間變大時，其中的子元素也會隨之擴大； 當空間變小時，其中的子元素也會隨之縮小。無論容器如何變化，子元素都能自如縮放。 ，雖然由于 Flexbox 目前只支持[最新的瀏覽器](http://caniuse.com/#search=flexbox)（ 從 IE11 開始 ）版本而使得使用受限，但是很多人認為在未來，它將會是人們用來實現流體網格的首選方案。 案例：[flexbox layout](http://codepen.io/kinghs/pen/LbmPQr) Flexbox相關我們后續通過專門一個課程來進行講解。[Flexbox深入淺出](http://www.hmoore.net/kinghs/flexbox) ## 參考資源 * [http://learn.shayhowe.com/advanced-html-css/responsive-web-design/](http://learn.shayhowe.com/advanced-html-css/responsive-web-design/) * [https://medium.com/@simurai/sizing-web-components-8f433689736f](https://medium.com/@simurai/sizing-web-components-8f433689736f) * http://clearleft.com/thinks/anequalheightgridusingflexbox/ * [google&udacity 響應式課程的 fluid grid 介紹](https://www.udacity.com/course/viewer#!/c-ud893/l-3533879576/m-3618968538) * [google&udacity 響應式課程的 Flexbox 介紹](https://www.udacity.com/course/viewer#!/c-ud893/l-3533879576/m-3604458542)