編寫第一個響應式頁面

時間 2019-11-19

標籤編寫第一個響應頁面简体版

原文原文鏈接

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

不知道如今你們還讀村上春樹嗎？在我剛上大學那會兒，一本《挪威的森林》在大夥兒中間傳來傳去，到最後書都散了架了。這是一種和之前徹底不一樣的閱讀體驗，那淡淡的憂傷彷彿從書中瀰漫出來，感染了已處於青春期尾巴上的咱們。html

然而，這和響應式頁面有什麼關係呢？前端

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

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

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

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

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

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

準備

在咱們動手實現本身的響應式頁面以前，先得掌握幾個重要的概念。編輯器

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 是二、三、四、6 的最小公倍數，這樣就很容易將整個頁面劃分爲二、三、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 框架，是爲了理解背後的原理，這樣使用其餘框架會變得更加容易，並且在框架不能知足需求時，還能夠定製本身的框架。