編寫第一個響應式頁面

2019獨角獸企業重金招聘Python工程師標準>>>

本文為大家講解如何使用一種科學的方法實現網頁設計，從原理上搞清楚什么是響應式設計，并實現一個簡易的響應式設計框架，以此為基礎，編寫出第一個響應式頁面。

不知道現在大家還讀村上春樹嗎？在我剛上大學那會兒，一本《挪威的森林》在大伙兒中間傳來傳去，到最后書都散了架了。這是一種和以前完全不同的閱讀體驗，那淡淡的憂傷仿佛從書中彌漫出來，感染了已處于青春期尾巴上的我們。

然而，這和響應式頁面有什么關系呢？

村上春樹這位大叔很可愛，最近，他推出了一個網站，在上面回答讀者來信。對于讀者拋來的各種問題，他回答的一板一眼，頗有些黑色幽默。下面是該網站首頁的截圖：

圖 1. 村上春樹的答讀者問網站

村上春樹的答讀者問網站

很樸素的頁面對嗎？如果你這樣想，那又被“狡猾”的日本人騙了？在平板上、在手機上訪問這個網站試試！

或者試試調整瀏覽器窗口的大小，大家會看到，同樣的頁面，在不同設備、不同瀏覽器窗口大小的情況下，頁面的顯示方式發生變化了。這就是響應式頁面，頁面會根據不同設備顯示尺寸的大小，自動調整頁面布局和顯示內容，來適應設備，帶給讀者更好的用戶體驗。

所以說，村上春樹回答讀者來信的這個頁面看似樸素，實則設計精巧，充分契合了他的寫作風格和低調隨和的氣質。

無獨有偶，在作者準備寫作此篇文章時，美國白宮的主頁也改版為響應式設計，果殼新推出的在行也是響應式的……響應式頁面的春天仿佛要來了！歡迎大家上網搜尋一些響應式頁面，把地址貼在留言中。

準備

在我們動手實現自己的響應式頁面之前，先得掌握幾個重要的概念。

HTML 簡介

HTML 是 Web 的基本語言，它描述了文檔的結構。比如拿一張報紙，我們會看到上面有標題、引文、正文、腳注等等。HTML 也一樣，它用各種帶有語義的標簽，描述了網頁的結構。它的語法很簡單：

清單 1. HTML 標簽語法

<tag?attribute=”value”>content</tag>

網頁結構全部由 HTML 提供的標簽描述，您可參考 MDN 提供的HTML 參考手冊自行學習常用的標簽。下面給出了一段示例代碼，讀者可將其復制到文本編輯器中，保存為 HMTL 格式，然后使用瀏覽器打開，會對 HTML 有一個直觀的感受。

清單 2. 示例 HTML 代碼

<html>
<body>
<p>
云對雨，雪對風，晚照對晴空。來鴻對去燕，宿鳥對鳴蟲。三尺劍，六鈞弓，
嶺北對江東。人間清暑殿，天上廣寒宮。兩岸曉煙楊柳綠，一園春雨杏花紅。
兩鬢風霜，途次早行之客；一蓑煙雨，溪邊晚釣之翁。
</p>
<q>
從前，有一個程序員，他得到了一盞神燈?。燈神答應實現他一個愿望。
然后他向神燈許愿，?希望在有生之年能寫一個好項目。后來他得到了永生。
</q>
<a?href="http://www.ibm.com/developerworks/cn/">http://www.ibm.com/developerworks/cn/</a>
<blockquote>
浪漫的愛是病態的，因為你無法愛很多人，你累積愛的能力，然后將它泛濫出來。
每當你找到一個人，這個泛濫的愛就被投射出來，一個平凡的女人就變成一個天使，
一個平凡的男人就變成神圣的。但當那個洪水過去后，你再度變正常，你會覺得被騙了。
他只是一個平凡的男人，她只是一個平凡的女人。
</blockquote>
</body>
</html>

這里有兩個地方值得注意：

選擇標簽時，應使用語義相匹配的標簽。比如上面的很多標簽，也可以使用一個<div>標簽代替，但這就使相應部分失去了語義，是一種不好的實現方式。
HTML 只描述文檔結構，不描述樣式！讀者如果用瀏覽器打開上述示例 HTML 代碼，可能會覺得有些疑惑，文中的三段話在樣式上看起來很明顯不一樣啊，這難道不是不同標簽帶來的效果嗎？不是，瀏覽器會為 HTML 標簽提供默認樣式，如果在瀏覽器中禁用所有樣式，就會發現它們看上去并無差別。以 Chrome 瀏覽器為例，可安裝 Web Developer 插件來禁用樣式。

CSS 簡介

CSS（Cascading Style Sheets），中文譯作級聯樣式表，用來定義文檔的樣式，比如字體、顏色、布局等。它的語法也非常簡單：

清單 3. CSS 語法

selector?{
property:?value;
…
}

您可自行參考CSS 手冊，熟悉其使用方法。

CSS 可以定義在 HTML 文檔頭部、元素里，也可以定義在一個單獨的 css 文件中。在實際開發中，為了達到內容和樣式的分離，一般都在單獨的文件中定義 CSS，這時，就需要在 HTML 文檔頭部引入 CSS：

清單 4. 引入 CSS 文件

<html>
<head>
<link?rel="stylesheet"?type="text/css"?href="style.css">
</head>
<body>
</body>
</html>

CSS 中所謂的級聯是指子元素會繼承父元素的樣式，所以在定義樣式時，應先從最上層的元素開始，先定義那些通用的樣式，然后再一層層下來，定義各子元素獨特的樣式。

一切皆盒子

圖 2. 盒子模型

盒子模型

您可以隨便在瀏覽器的開發者工具中審查頁面上的任意元素，都會發現其外觀符合上圖所示的一個盒子模型。以該圖為例：元素的尺寸為 200×200，內邊距為 30，邊框為 10，另外上下左右各有 20 和 59 的外邊距。在頁面上顯示時，一個元素的尺寸即包含自身大小，也包含內邊距和邊框，即圖中黑色實線圍起來的部分。前端開發人員在編寫 CSS 時，要不斷計算一個元素的實際顯示大小，實在有點繁瑣。

萬幸的是 box-sizing 屬性可以改變 CSS 的盒子模型，將該屬性指定為 border-box 后，元素顯示時的實際大小即為 CSS 中定義的 width 和 height，而元素的大小則在此基礎之上減去內邊距和邊框的大小，自動適應。以下圖為例，如果在 CSS 中加入如下代碼，則元素的大小會自動適應，變為 120×120。試試吧！

清單 5. box-sizing

*?{
-moz-box-sizing:?border-box;
-webkit-box-sizing:?border-box;
-ms-box-sizing:?border-box;
box-sizing:?border-box;}

后續內容都基于您了解了什么是盒子模型，并且使用上述 CSS 片段改變盒子模型的行為基礎之上，如果對于這個知識點還有疑問，請參考文末的參考資料自行學習掌握。

設計自己的響應式 CSS 框架

上面我們對 HTML 和 CSS 做了簡要的介紹，從本節開始，將把重點放在如何實現響應式設計上。為實現響應式頁面，必須具備兩種能力：首先需要靈活方便的布局方式；其次需要在恰當的時機對頁面布局進行調整。在重點討論這兩種方式之前，我們先花點時間研究一下網頁的設計原則。

一切皆網格

您打開一個網頁，目光會首先聚焦到頁面頂部，然后自頂向下，自左向右移動，這是最符合人類行為習慣的。網頁設計也遵循同樣的原則，將網頁自頂向下，自左向右分成不同的單元格。不信的話，您可以隨便打開一個網站，看看是否遵循這樣的原則。下圖是作者的豆瓣頁面，我用紅顏色的方框畫出了大致的單元格，當然，這只是一個粗略的劃分，單元格里面的內容還可以劃分得更精細。

事實上，一個前端開發者拿到一個設計時，就會對設計進行這樣的劃分，以此定義 HTML 結構，然后使用 CSS 對頁面進行布局，并且調整字體、顏色等，最終實現出符合設計師要求的頁面。

那些常用的 CSS 框架對頁面也是以網格劃分，一般將整個頁面劃分為 12 列，之所以選擇 12，是因為 12 是 2、3、4、6 的最小公倍數，這樣就很容易將整個頁面劃分為 2、3、4……列。

圖 3. 一切皆網格

一切皆網格

下面我們看看如何使用 HTML 和 CSS 實現這樣的網格系統。簡單來說，我們將頁面從橫向劃分為若干行，從縱向劃分為 12 列，每一列占整個行寬度的 1/12，這樣當頁面的大小變化時，每一列的寬度也會按比例放大或縮小。比如下面的 HTML 片段，把頁面分成了 4 行，前兩行分成兩列，后兩行分成三列，每列占用不同的頁面寬度。

清單 6. 網格-HTML

??<div?class="grid">
<div?class="row">
<div?class="col-2">2?Columns</div>
<div?class="col-10">10?Columns</div>
</div>
<div?class="row">
<div?class="col-3">3?Columns</div>
<div?class="col-9">9?Columns</div>
</div>
<div?class="row">
<div?class="col-4">4?Columns</div>
<div?class="col-4">4?Columns</div>
<div?class="col-4">4?Columns</div>
</div>
<div?class="row">
<div?class="col-3">3?Columns</div>
<div?class="col-6">6?Columns</div>
<div?class="col-3">3?Columns</div>
</div>
</div>

我們使用如下的 CSS 定義網格，為了調試方便，特意為元素加了 1 個像素的邊框。在 CSS 中，我們定義了行寬為 100%，且分別定義了 1 列、2 列……12 列的寬度。

清單 6. 網格-CSS

*?{
border:?1px?solid?red?!important;
}?.row?{
width:?100%;
}.col-1?{
width:?8.33%;
}.col-2?{
width:?16.66%;
}.col-3?{
width:?25%;
}.col-4?{
width:?33.33%;
}.col-5?{
width:?41.66%;
}.col-6?{
width:?50%;
}.col-7?{
width:?58.33%;
}.col-8?{
width:?66.66%;
}.col-9?{
width:?75%;
}.col-10?{
width:?83.33%;
}.col-11?{
width:?91.66%;
}.col-12?{
width:?100%;
}

用瀏覽器打開頁面，效果并不如我們期望的那樣，雖然每列的寬度符合我們的預期，但是它們并沒有排在同一行內，而是從上到下排列。這一點也不意外，這是瀏覽器對 HTML 元素默認的布局方式。幸運的是，我們只需要一個 CSS 元素，就可以將布局調整為我們期望的方式。

圖 4. 未完成的網格

未完成的網格

flex 布局

flex 布局非常強大，它可以將一個元素的所有子元素以一種彈性的方式布局，按照比例自動填充滿元素的寬度。我們只需在上述 CSS 的.row 類更改如下：

清單 7. flex 布局

.row?{
width:?100%;
display:?flex;
}

如同變戲法一般，我們想要的網格出來了！

圖 5. 完成后的網格

完成后的網格

flex 布局還有一個 flex-wrap: wrap 屬性，當父元素剩下的寬度容納不下更多子元素時，會自動將子元素放在下一行顯示，這在響應式設計中特別有用。

事實上，這個頁面現在已經是響應式頁面了，您可以調整瀏覽器大小，或者在平板、手機上訪問該頁面，它的內容會根據分辨率大小做出相應調整。

圖 6. 響應式的網格

響應式的網格

當然，通常的響應式頁面要做的工作更多，不光內容可以自動適應瀏覽器窗口的大小，布局也要做出相應的調整，甚至在手機或平板上，由于有限的分辨率，需要隱藏一些不重要的內容，以此帶給用戶更好的體驗。

Media Query

這一切都可以通過 media query 實現，media query 可以根據一些判斷條件，對頁面應用不同的 CSS。比如下面的 CSS 片段，會在瀏覽器窗口小于 500 像素時，隱藏第一行第二列，并將第三行的背景色改為黃色。

清單 8. Media query

@media?only?screen?and?(max-width:?500px)?{
.col-4?{
background-color:?yellow;
}.col-10?{
display:?none;
}
}

圖 7

事實上，我們已經實現了一個響應式 CSS 框架，使用這一框架我們已經有能力實現一些簡單的響應式頁面。當然，在實際工作中我們一般不會這么做，我們通常選用已有的 CSS 框架，比如Bootstrap，這些框架的功能更加強大，我們只用編寫很少的代碼就能實現一個響應式頁面。之所以我們要自己設計一個響應式 CSS 框架，是為了理解背后的原理，這樣使用其他框架會變得更加容易，而且在框架不能滿足需求時，還可以定制自己的框架。