響應(yīng)式Web設(shè)計：使用HTML5和CSS3實踐 - 筆記

因為有機會參與一個項目的早期設(shè)計，因此搭建的時候不可避免的遇到了如何滿足響應(yīng)式的問題。翻閱了《響應(yīng)式Web設(shè)計：HTML5和CSS3實踐》和《Implementing Responsive Design》并記錄了篇筆記，以供參考，另一本書的筆記以及在項目開發(fā)中的一些心得后續(xù)會補上，因為筆記在不斷更新和完善中，如果有紕漏還請幫忙指正。

筆記參考自《響應(yīng)式Web設(shè)計：HTML5和CSS3實踐》，2013年出版內(nèi)容說不上最新。如下是全書的章的目錄：

  • 第 1 章,HTML5、CSS3 及響應(yīng)式設(shè)計入門
  • 第 2 章,媒體查詢
  • 第 3 章,擁抱流式布局
  • 第 4 章,響應(yīng)式設(shè)計中的 HTML5
  • 第 5 章,CSS3
  • 第 6 章,用 CSS3 創(chuàng)造令人驚艷的美
  • 第 7 章,CSS3 的過渡、變形和動畫
  • 第 8 章,用 HTML5 和 CSS3 征服表單
  • 第 9 章,解決跨瀏覽器問題

第1章 HTML5、CSS3 及響應(yīng)式設(shè)計入門

一些要點：

  • 人們通過手機瀏覽網(wǎng)頁的比率在上升。手機瀏覽器瀏覽網(wǎng)頁時，會讓網(wǎng)頁縮小至可視區(qū)域（“視口”），使用者可以對感興趣的內(nèi)容再單獨放大。但是反復(fù)縮小、放大、點錯位置終究不是友好的做法。

  • 預(yù)算充足的情況下，我們可以單獨開發(fā)“手機版”網(wǎng)站，可以在其中增強一些功能，譬如根據(jù)當(dāng)前GPS來挖掘出有價值數(shù)據(jù)。多數(shù)時候，根據(jù)視口大小來匹配不同的視覺效果還是優(yōu)先選擇。

  • 響應(yīng)式設(shè)計的概念最早提出是指將彈性網(wǎng)格布局、彈性圖片、媒體和媒體查詢結(jié)合起來的網(wǎng)頁開發(fā)技巧的結(jié)合。和以往的做法不同，我們推薦首先對小屏幕進(jìn)行設(shè)計，然后逐漸增強針對大屏幕的設(shè)計和內(nèi)容。

  • 全方位的測試響應(yīng)式網(wǎng)站，只需要改變?yōu)g覽器窗口大小就能完成大多數(shù)測試。當(dāng)然你可以下載瀏覽器的插件來做到這些，比如Chrome上可以用WindowResizer插件。

  • 一些響應(yīng)式開發(fā)的站點

  • 使用HTML5和CSS3能使前端的效果實現(xiàn)變得簡單很多，但是也面臨著瀏覽器不支持的問題。我們可以用一些現(xiàn)代化的工具（庫）來修補它們。

  • 重申一點，預(yù)算允許條件下完全定制的移動Web開發(fā)比響應(yīng)式網(wǎng)站開發(fā)更合適，但預(yù)算有限的前提下響應(yīng)式Web設(shè)計較之標(biāo)準(zhǔn)的固定寬度設(shè)計，總是能夠提供更好的用戶體驗。

第2章 媒體查詢：支持不同的視口

關(guān)于媒體查詢

  • 開始使用媒體查詢吧，它已經(jīng)被如此廣泛地使用和被瀏覽器所支持。
  • 有了媒體查詢，我們就能對設(shè)備特性（如視口寬度）設(shè)置特定的CSS樣式。
  • 媒體查詢的語法（可以拷貝如下代碼到任意CSS的文件后面，然后預(yù)覽相關(guān)網(wǎng)頁的效果）。
   body {
       background-color: grey;
   }
   @media screen and (max-width: 960px) {
       body {
           background-color: red;
       } 
   }
   @media screen and (max-width: 768px) {
       body {
           background-color: orange;
       }
   }
   @media screen and (max-width: 550px) {
       body {
           background-color: yellow;
       } 
   }
   @media screen and (max-width: 320px) {
       body {
           background-color: green;
       }
   }

  • 在CSS2中可以通過制定<link>標(biāo)簽的media屬性來為樣式表指定的設(shè)備類型（如顯示屏或者打印機）。

    <link rel="stylesheet" type="text/css" media="screen" href="screen-styles.css">

  • 媒體查詢則不僅是針對設(shè)備類型，還能根據(jù)設(shè)備的特性來應(yīng)用樣式，如下例為檢測一塊縱向放置的顯示屏。

    <link rel="stylesheet" media="screen and (orientation: portrait)" href="portrait- screen.css" />

  • 你甚至可以在檢測中加上not來顛倒上例中的查詢條件。

    <link rel="stylesheet" media="not screen and (orientation: portrait)" href="portrait- screen.css" />

  • 也可以將多個表達(dá)式組合在一起，如下為增加了視口寬度大于800的顯示屏。

    <link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px)" href="800wide-portrait-screen.css" />

  • 更進(jìn)一步還可以寫一個媒體查詢列表，相互之間用逗號隔開，任何一個條件滿足就加載文件。

    <link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px), projection" href="800wide-portrait-screen.css" />

  • 除了在<head></head>中鏈接CSS文件時候使用媒體查詢，我們也可以在CSS文件中使用媒體查詢。

    @media screen and (max-device-width: 400px) {
     h1 { color: green }
}

  • 還可以在CSS中使用@import指令引入其他的樣式表，謹(jǐn)慎使用這種方式，因為它會增加HTTP的請求從而導(dǎo)致網(wǎng)頁加載速度變慢。

    @import url("phone.css") screen and (max-width:360px);

  • 媒體查詢能使用的特性

    媒體查詢中最常用的兩個特性是視口寬度width和屏幕寬度device-width，除此以外還有orientation、aspect-ratio等特性可以檢測到。這些特性幾乎都可以結(jié)合max和min結(jié)合來創(chuàng)建一個使用范圍。如下phone.css只有在視口寬度在200到300之間才會被引入：

    @import url("phone.css") screen and (min-width:200px) and (max-width:360px);

  • 如何用媒體查詢來改造我們的設(shè)計

    CSS名為層疊樣式表，意為后面的樣式會覆蓋前面的相同的樣式，因此我們的做法是在前面設(shè)置通用的樣式，然后用媒體查詢來進(jìn)一步重寫相應(yīng)部分。

  • 加載媒體查詢的最佳方法

    瀏覽器雖然能忽略與自身不匹配的樣式文件，但卻不一定不下載這些文件。因此，你將樣式文件拆分到不用的樣式文件沒有太大好處（個人喜好或者方便代碼組織的目的除外），這會增加頁面請求HTTP的數(shù)量。因此建議用如下的方式在已有的樣式表中追加媒體查詢樣式。

    @media screen and (max-width: 768px) {/*樣式*/}

我們的第一個響應(yīng)式設(shè)計

不管如何開始動手做一個響應(yīng)式設(shè)計的頁面吧。這個網(wǎng)站的主題是關(guān)于電影，該書作者的初衷是這樣的“我打算自己弄一個And the winner isn't的網(wǎng)站，褒獎哪些本應(yīng)該獲獎的電影，批評那些不應(yīng)該獲獎的電影。這里還能視頻剪輯、經(jīng)典語錄、電影海報，以及證明我沒錯的在線調(diào)查”。

1. 從固定寬度設(shè)計開始

雖然理論上是從移動（小屏幕）的體驗出發(fā)開始設(shè)計，但現(xiàn)實中更多的還是將桌面版網(wǎng)頁設(shè)計改成響應(yīng)式的。既然目前和將來相當(dāng)一段時間內(nèi)我們都是這么做，我們還是從固定寬度開始。如下是一個固寬度的界面原型，包含了頭部、導(dǎo)航、邊欄、內(nèi)容區(qū)和頁腳。

1_outlook

在此我們先測驗一下HTML4標(biāo)簽來測驗我們的媒體查詢技巧。如下為HTML4便攜的沒有實際內(nèi)容的基本頁面結(jié)構(gòu)。

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>And the winner isn't</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="wrapper">
        <!-- the header and navigation -->
        <div id="header">
            <div id="navigation">
                <ul>
                    <li><a href="#">navigation1</a></li>
                    <li><a href="#">navigation2</a></li>
                </ul>
            </div>
            </div>
            <!-- the sidebar -->
            <div id="sidebar">
                <p>here is the sidebar</p>
            </div>
            <!-- the content -->
            <div id="content">
                <p>here is the content</p>
            </div>
            <!-- the footer -->
            <div id="footer">
                <p>Here is the footer</p>
            </div>
    </div>
</body>
</html>

然后我們?yōu)楦鱾€模塊加入了一些基本的樣式。

css/main.css

#wrapper {
  margin-right: auto;
  margin-left: auto;
  width: 960px;
}
#header {
  margin-right: 10px;
  margin-left: 10px;
  width: 940px;
  background-color: #779307;
}
#navigation ul li {
  display: inline-block;
}
#sidebar {
  margin-right: 10px;
  margin-left: 10px;
  float: left;
  background-color: #fe9c00;
  width: 220px;
}
#content {
  margin-right: 10px;
  float: right;
  margin-left: 10px;
  width: 700px;
  background-color: #dedede;
}
#footer {
  margin-right: 10px;
  margin-left: 10px;
  clear: both;
  background-color: #663300;
  width: 940px;
}

在一個視口大于960的瀏覽器中，頁面的瀏覽效果如下。

2_rawOutlook
2. 響應(yīng)式設(shè)計中圖片應(yīng)該盡可能保持精簡

為了更好的體現(xiàn)固定寬度的設(shè)計在視口大小變化時的存在的問題，作者對網(wǎng)頁內(nèi)容進(jìn)行了美化。遺憾的是作者并沒有將它放置到Github上，得要我們自己到 andthewinnerisnt 上把網(wǎng)頁內(nèi)容保存，然后將還未講解到的特性等刪除，以方便按順序來閱讀和增強代碼。這里可能需要稍微花費一點時間，因為很多寫法都已經(jīng)是優(yōu)化后的了。為了繼續(xù)前進(jìn)，簡單整理后頁面效果如下（跟作者網(wǎng)站沒太大區(qū)別）：

3_beautifyOutlook

有兩點是需要了解的。

  • 使用到的圖片應(yīng)該盡可能小。

    不論是否是響應(yīng)式Web設(shè)計，都應(yīng)該盡可能減少圖片的大小，頭部和底部的小彩旗就是通過背景圖片的repeat-x來呈現(xiàn)的。

  • 關(guān)于重置樣式。

    各種瀏覽器渲染HTML時會有各種默認(rèn)樣式，為了統(tǒng)一表現(xiàn)我們通常會導(dǎo)入重置樣式在主樣式文件的開頭。對于HTML5，normalize.css就是不錯的選擇。

你可以網(wǎng)頁窗口拉伸到小于960像素，會看到內(nèi)容被截斷了。同樣你可以在手機上訪問，想像一下網(wǎng)頁內(nèi)容在手機上會被截斷成什么樣（開發(fā)過程中你可以起個server讓后通過手機訪問頁面; 但是如前面章節(jié)提到的，可以簡單地用Chrome的插件（個人因為在公司所有的Chrome插件都被禁用了，所以干脆使用Chrome自帶的模擬器來模擬，但是這個模擬器并不好用，頁面上進(jìn)行了分辨率設(shè)置以后要反復(fù)toggle幾次emulate mobile選項才生效。嗯，如果有條件不嫌麻煩就整個真正的移動設(shè)備模擬器吧）。如下圖，在Chrome的進(jìn)行如下設(shè)置。

4_emulationSet1

你會發(fā)現(xiàn)獲取得到的效果居然還不錯，那是因為瀏覽器默認(rèn)在一定分辨率下渲染頁面，然后將網(wǎng)頁內(nèi)容縮小到了?與視口大小匹配。下一節(jié)會介紹如何阻止瀏覽器自動調(diào)整頁面大小。

5_mobileEffect
3. 阻止移動瀏覽器自動調(diào)整大小

IOS和Android的瀏覽器都是基于WebKit核心，這兩種瀏覽器以及其他很多瀏覽器都支持用viewport meta來覆蓋默認(rèn)的畫布縮放設(shè)置。

下面是一個將畫布大小放大到實際尺寸兩倍的示例：

<meta name="viewport" content="initial-scale=2.0,width=device-width, maximum-scale=3, minimum-scale= 0.5" />

在模擬器中加載該頁面可以看到如下效果，夸張的效果已經(jīng)說明了問題。initial-scale=2.0的意思是將頁面放大n(n=2.0)倍。device-width同時告訴瀏覽器寬度應(yīng)該等于設(shè)備寬度。maximum-scale和minimum-scale還可以用來控制頁面的可縮放范圍。

6_scale

你甚至可以禁止用戶縮放，不過因為縮放是一個很重要的輔助功能，在實踐中很少使用。

meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

下面是我們最終使用的meta標(biāo)簽。

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

關(guān)于initial-scale要特別說明下，width=device-width設(shè)置以后瀏覽器的寬度跟媒體視口一致，經(jīng)過了initial-scale=1.0的設(shè)定以后，呈現(xiàn)的內(nèi)容大小就是設(shè)定的原始內(nèi)容大小，而不要瀏覽器替你收縮（這是我們進(jìn)行包含了移動端響應(yīng)式設(shè)計的前置條件）。

拋出另一個問題，在模擬器中當(dāng)我們設(shè)置initial-scale2.0的時候，inspect element內(nèi)容區(qū)域比如#header大小仍舊是960px，為什么不是960*2。只需要假定我們使用了一個類放大鏡的之類的東西導(dǎo)致看到的內(nèi)容變大了。

4. 針對不同的視口寬度修正設(shè)計

我們首先為豎屏的iPad3/4增加媒體查詢，同樣因為Chrome模擬器不支持豎屏設(shè)置，我們就手動設(shè)置好了。如下為模擬器設(shè)置和沒有進(jìn)行媒體查詢的效果。

7_scaleAdjust

然后我們可以增加媒體查詢和樣式設(shè)置，可以看看效果。

@media screen and (max-width: 768px) {

    #wrapper {
        width: 768px;
    }
    #header, #footer, #navigation {
        width: 748px;
    }
}
8_scaleAdjust2

顯示還是有一些問題，我們可以繼續(xù)優(yōu)化，如下應(yīng)用以后sidebar和content都填滿了寬度。

 @media screen and (max-width: 768px) {
         #wrapper {
           width: 768px;
         }
         #header,#footer,#navigation {
           width: 748px;
         }
         #content,#sidebar {
           padding-right: 10px;
           padding-left: 10px;
           width: 728px;
    } 
}
5. 響應(yīng)式設(shè)計中內(nèi)容始終優(yōu)先

一個設(shè)計原則是，盡可能在多平臺多視口下保留盡可能多的內(nèi)容，而不是使用display:none等類似的方法來隱藏部分內(nèi)容。同時你要意識到內(nèi)容順序的重要性，目前頁面中側(cè)邊欄和主內(nèi)容區(qū)的順序決定了側(cè)邊欄會顯示在主內(nèi)容區(qū)前面，在窄視口設(shè)備下，用戶先看到主內(nèi)容再看到側(cè)邊欄顯然更加合理。因此我們將#content和#siderbar進(jìn)行互換。雖然標(biāo)簽換了位置，但頁面在大視口下沒有變化，但是在iPad上變成了首先顯示主內(nèi)容區(qū)，下面才是側(cè)邊欄。

在調(diào)整好標(biāo)簽位置以后，我們還可以追加一些樣式，使在iPad上的顯示更加美觀。

@media screen and (max-width: 768px) {
    #wrapper,#header,#footer,#navigation {
        width: 768px;
        margin: 0px;
    }
    #logo {
        text-align:center;
    }
    #navigation {
       text-align: center;
       background-image: none;
       border-top-color: #bfbfbf;
       border-top-style: double;
       border-top-width: 4px;
       padding-top: 20px;
   }
    #navigation ul li a {
        background-color: #dedede;
        line-height: 60px;
        font-size: 40px;
    }
    #content, #sidebar {
        margin-top: 20px;
        padding-right: 10px;
        padding-left: 10px;
        width: 728px;
    }
    .oscarMain {
        margin-right: 30px;
        margin-top: 0px;
        width: 150px;
        height: 394px;
    }
    #sidebar {
        border-right: none;
        border-top: 2px solid #e8e8e8;
        padding-top: 20px;
        margin-bottom: 20px;
    }
    .sideBlock {
        width: 46%;
        float: left;
    }
    .overHyped {
        margin-top: 0px;
        margin-left: 50px;
    }
}
6. 媒體查詢只是響應(yīng)式開發(fā)的必要條件之一

盡管我們針對iPad上做了媒體查詢和樣式設(shè)置，網(wǎng)站在低分辨率上的iPhone的視口上顯示的仍舊很糟糕。我們雖然使用媒體查詢對視口寬度小于768像素應(yīng)用了樣式，但是介于768到960像素之間的設(shè)備，則沒有對應(yīng)的媒體查詢代碼，內(nèi)容因此會被剪切掉。

目前的情形是，我們針對特定的斷點設(shè)置了媒體查詢?nèi)缓笫共季职l(fā)生變化，但是捕捉到下一個視口斷點之前，頁面靜止不變。我們需要更好的策略，能夠在斷點導(dǎo)致的效果突變之前保持伸縮。如何做到這點，正是下一章的內(nèi)容：將呆板的固定布局修改成靈活的流動布局。

第3章 擁抱流式布局

1. 為什么固定布局經(jīng)不起考驗

我們使用固定布局，當(dāng)不同的視口出現(xiàn)的時候，你可以單獨增加媒體檢測，但未來會有更多大小不一的視口出現(xiàn)。

2. 為什么響應(yīng)式布局需要百分比設(shè)計

使用百分比布局創(chuàng)建流動的彈性界面，同時使用媒體查詢來限制元素的變動訪問，將這兩者組合一起構(gòu)成了響應(yīng)式設(shè)計的核心，基于此可以真正創(chuàng)造出真正完美的設(shè)計。

3. 將網(wǎng)頁從固定布局修改為百分比布局

在可預(yù)見的未來，我們的網(wǎng)頁制作都是基于設(shè)計圖的度量元素的大小、外邊距來寫CSS代碼。我們該如何將固定尺寸轉(zhuǎn)換為相對尺寸呢？

3.1 需要牢記的公式

目標(biāo)元素寬度 / 上下文元素寬度 = 百分比寬度

3.2 設(shè)置百分比元素的上下文

在我們的例子中，#wrapper是內(nèi)容區(qū)、側(cè)邊欄、頁腳設(shè)定寬度的上下文，我們需要給他們設(shè)定百分比值。當(dāng)然你也可以給#wrapper設(shè)定一個百分比，對于#wrapper而言，百分比是相對于視口尺寸而言的。

我們先來看看頭部，#header（目標(biāo)元素）寬度為940像素，#wrapper（上下文元素）寬度為940像素。按照計算公司得到的結(jié)果是0.979166667，設(shè)置到CSS中是：

width: 97.9166667%; /* 940 ÷ 960 */

同樣的設(shè)置可以被應(yīng)用到#navigation和#footer中。

再來看#content和#sidebar，比如我自己改寫的例子中#content的寬度為666像素，#siderbar為220個像素，計算得到百分比分別為：666/960*100=69.375%和（220-2)/960*100%=22.708333333333332%（2像素為border-right的值）。

接下來繼續(xù)使用，將頁面各處10像素的內(nèi)邊距、外邊距也替換為等價的百分比，所有這些間距都是基于960像素的上下文，替換成對應(yīng)的百分比就是：1.0416667%(10/960)。

3.3 必須時刻牢記上下文

一個需要注意的問題是百分比設(shè)置的上下文，在該書的例子中的導(dǎo)航欄中有ul>li>a的結(jié)構(gòu)，我們給a設(shè)定了margin-right:25px來控制導(dǎo)航元素之間的間距。但是使用上述的公式將固定限速設(shè)置為百分比后發(fā)現(xiàn)并不起作用。因沒有為li設(shè)定寬度，子節(jié)點a找不到上下文的寬度。對此解決辦法有很多，其中一種是直接將margi-right屬性設(shè)置到li上來，以為內(nèi)ul是有設(shè)置寬度的。

3.4 用em換成px

最初設(shè)計師們使用em是因為在老版本的Internet Explorer無法縮放像素單位的文字。但現(xiàn)代瀏覽器早就支持了，那么用em替代px還有什么優(yōu)越性呢。有兩點理由：

（1）那:wq些使用Internet Explorer的用戶也能夠縮放文字

（2）這樣做使設(shè)計師們的工作變得更加簡單

em的實際大小是相對于上下文字體大小而言的，如果我們給body標(biāo)簽設(shè)置的文字大小是100%，給其他的文字都使用相對單位em，那么這些字體都會受到body上的初始聲明的影響。這樣做的好處是，如果完成了所有文字排版以后客戶提出希望把字體整體調(diào)大一些，那么我們只需要修改body的文字大小其他所有文字都會相應(yīng)變化。

同樣，目標(biāo)元素尺寸 / 上下文元素尺寸 = 百分比尺寸 這個公式也適用于將文字的像素單位轉(zhuǎn)換為相對單位。現(xiàn)代瀏覽器的默認(rèn)字體大小都是16像素(作者疏漏了還是過時了明明是14好么)，因此一開始給body標(biāo)簽應(yīng)用如下任何一條規(guī)則都是一樣的效果：

font-size: 16px;
font-size: 100%;
font-size: 1em;

舉一個例子，我們?yōu)闉榫W(wǎng)站標(biāo)題設(shè)置了如下樣式：

#logo {
    display: block;
    padding-top: 75px;
    color: #0d0c0c;
    text-transform: uppercase;
    font-family: Arial, "Lucida Grande", Verdana, sans-serif font-size: 48px;
}
#logo span { 
    color: #dfdada; 
}

因為48/16=3,我們可以對字體大小進(jìn)行改動：

font-size: 3em; /* 48 ÷ 16 = 3*/

如果應(yīng)用這個規(guī)則除了毛病，通常是目標(biāo)元素的上下文發(fā)生了變化，以頁面中的標(biāo)簽為例：

<h1>Every year <span>when I watch the Oscars I'm annoyed...</span></h1>

修改后的相對單位樣式如下：

#content h1 {
    font-family: Arial, Helvetica, Verdana, sans-serif; text-transform: uppercase;
    font-size: 4.3125em; /* 69 ÷ 16 */
} 
#content h1 span {
    display: block;
    line-height: 1.052631579em; /* 40 ÷ 38 */ 
    color: #757474;
    font-size: .550724638em; /* 38 ÷ 69 */
}

可以看到，span的元素大小是相對于其父元素的文字的大小，而它的行高是相對于文字本身的大小。

3.5 彈性圖片

現(xiàn)代瀏覽器下要實現(xiàn)圖片隨著流動布局相應(yīng)縮放大小只需要在CSS中做如下聲明：

img {
    max-width: 100%;
}

也可以把這個技術(shù)應(yīng)用到其他多媒體標(biāo)簽上：

img,object,video,embed {
    max-width: 100%;
}

但我們也面臨著一個問題，不論多大的視口都要下載同一張圖片（當(dāng)然是一張為了兼容大視口的大圖片）未免有些浪費寬帶。

讓圖片隨視口縮放

將奧斯卡圖像的固定寬高刪掉，并設(shè)置一個百分比，然后可以拉伸頁面試一把效果。

.oscarMain {
    float: left;
    margin-top: -28px;
    width: 28.9398281%; /* 202 ÷ 698 */
}

給彈性圖片設(shè)置閾值

當(dāng)我們把窗口超過一定分辨率時，圖片也被拉拉大了，我們可以追加一個特定樣式來為圖片設(shè)定閾值。

.oscarMain {
    float: left;
    margin-top: -28px;
    width: 28.9398281%; /* 698 ÷ 202 */ 
    max-width: 202px;
}

超級全能的max-width屬性

另一種限制頁面無限擴展的方法是給最外層的#wrapper增加max-width屬性（有使用過Bootstrap的應(yīng)該不會陌生），如下所示：

#wrapper {
    margin-right: auto;
    margin-left: auto;
    width: 96%; /* Holding outermost DIV */ 
    max-width: 1414px;
}

這意味著也頁面會縮放至視的96%，但絕不會超過1414像素寬。

3.6 為不同的屏幕尺寸提供不同的圖片

跟目前工作關(guān)聯(lián)不大，暫且跳過。

作者推薦了Matt Wilco的做法，大致思路是由服務(wù)器端去生成各種尺寸的圖片，并且根據(jù)客戶端發(fā)送過來的關(guān)于resolution大小的信息來決定返回什么尺寸的圖片。

3.7 流動布局和媒體查詢的默契配合

本章前面，我們的導(dǎo)航鏈接在特定的視口寬度下會折成兩行，我們可以使用媒體查詢來修正這個問題。


@media screen and (min-width: 1001px) and (max-width: 1080px) {
    #navigation ul li a { font-size: 1.4em; }
}
@media screen and (min-width: 805px) and (max-width: 1000px) {
    #navigation ul li a { font-size: 1.25em; }
}
@media screen and (min-width: 769px) and (max-width: 804px) {
    #navigation ul li a { font-size: 1.1em; }
}

媒體查詢約束流動布局的變動范圍，而流動布局則簡化了從一組媒體查詢樣式過渡到另一組的過渡過程。

3.8 CSS網(wǎng)格系統(tǒng)

該章節(jié)介紹了比較流行的幾種網(wǎng)格系統(tǒng)，并用其中一種實現(xiàn)了我們之前所繪的頁面。因為閱讀這本書的時候，Bootstrap已經(jīng)大行其道并前端開發(fā)者所熟知了，就不贅述該書的示例了。但是有一點要注意，Bootstrap這樣的網(wǎng)格系統(tǒng)為我們提供了通過比如cols-md-*等樣式提供了寬度、字體大小等的預(yù)設(shè)，但在要求嚴(yán)格按照設(shè)計實現(xiàn)界面的情況下，我們還是要自己來設(shè)置它們。

第4章 響應(yīng)式設(shè)計中的HTML5

本章概覽式地介紹了一些HTML5相關(guān)知識，更多偏向概念和引導(dǎo)性，操作性不強。

  • 大多數(shù)網(wǎng)站可以采用HTML5來編寫。

  • polyfill腳本：通常指的是一段能給老版本瀏覽帶來新特性的JavaScript代碼。

  • Modernizr是一個很常用的相對polyfill更加增強了的腳本庫。

  • 時間緊迫可以考慮使用HTML5樣板文件。里面包含了基本樣式normalize.css、polyfill和一些必要的工具如Modernizr。

  • 前端開發(fā)工具基本都包含了迅速生成基本文件的功能，這里只稍微對比一下兩個lang和charset的含義：lang="en"指的是語言，比如中文、英文；<meta charset="UTF-8">指的是字符集，可用的類型可就多了只對中文這種語言就有很多種字符集可用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

  • HTML5的標(biāo)簽是可以簡略地書寫的，并且一些不符合XHTML1.0的寫法也不會有任何問題，但我們還是推薦盡可能標(biāo)準(zhǔn)的方式來書寫HTML代碼，并且盡可能找到一個平衡：類似于<link>的type屬性可以省略，但標(biāo)簽要記得閉合并且給屬性加上引號。

  • 有一些標(biāo)簽在HTML5中被廢棄了，你也許很多都沒有用到過，但是記住要盡可能采用CSS的方式來實現(xiàn)效果，而不是之前的在標(biāo)簽上加屬性的方式。

  • HTML5增加了一些全新的語義化元素，為什么語義化很重要，因為在以前的做法中我們通過給div家id和class能夠讓其他人在閱讀代碼的時候很好地理解代碼，但是對機器而言就不那么簡單了。HTMl5旨在用全新的語義化標(biāo)簽來解決這個問題。如下是一些語義化標(biāo)簽的列表（不打算詳細(xì)記錄，那樣也沒有意義）：

    • section
    • nav
    • article
    • aside
    • hgroup
    • header
    • footer
    • address

  • HTML5的很多容器都有自己獨立的大綱結(jié)構(gòu)，這意味著你不用總是去想現(xiàn)在是幾級標(biāo)題，不同父級容器會給不同的標(biāo)題相應(yīng)的大小樣式，你只需要在容器中任意使用就好。

  • 有一些網(wǎng)頁工具可以用來測試生成的網(wǎng)頁的大綱結(jié)構(gòu)（個人認(rèn)為對于排版不佳、長久未讀的代碼還是有些幫助的）。

  • 可以嘗試著把之前自己構(gòu)建的網(wǎng)頁的元素替換成header、nav、footer，然后修改對應(yīng)的css中的選擇器。

  • HTMl5中的文本語義級元素如b, em, i以前會是用來添加文本樣式的并且不推薦為了做樣式而使用它們，但是現(xiàn)在通常有了新的語義可以自己查詢看，不贅述。

  • 遵循WAI-ARIA是指無障礙網(wǎng)頁應(yīng)用技術(shù)，來讓殘障人士能夠訪問網(wǎng)頁中的動態(tài)內(nèi)容，實現(xiàn)這些技術(shù)包含的內(nèi)容有很多，這里只簡單提一下會用到的一些，比如地標(biāo)角色landmark role（也就是在很多頁面中看到的role="navigation/application/banner/form"等）可以讓屏幕閱讀器在不同的頁面區(qū)塊之間輕松跳轉(zhuǎn)。

  • Apple公司拒絕在IOS設(shè)備上支持Flash的時候極大的促進(jìn)了HTMl5的發(fā)展。

  • 使用HTML5方法為頁面添加視頻或者音頻

    • 因為早起瀏覽器內(nèi)置視頻格式的爭議，目前很多瀏覽器支持的不同的格式的視頻或音頻，為了解決這個問題我們可能會為這個視頻或音頻創(chuàng)建多個版本，并都嵌套在video標(biāo)簽中。
    • 為了給IE8以及更低版本的瀏覽器提供備用方案，你可能還需要追加一個Flash甚至媒體文件的下載鏈接。
    • audio和video的標(biāo)簽用法基本一致。

  • 響應(yīng)式視頻

    • 給視頻設(shè)置固定寬高，當(dāng)頁面被拉伸的時候，似乎就不怎么響應(yīng)式了，你可以就本書的例子或者W3C上找一個例子試一試。通過給視頻設(shè)置max-width: 100%的方法能夠解決這個問題（本書前面章節(jié)針對圖片有提到過這個解決方案）。

  • 離線Web應(yīng)用

    • 對于一些應(yīng)用需要在離線狀態(tài)下能夠正常使用。比如一個筆記應(yīng)用，當(dāng)用戶的手機網(wǎng)絡(luò)斷開時，可能正在編輯一篇筆記，通過使用Web離線功能他就能夠繼續(xù)編輯筆記，等到網(wǎng)絡(luò)連接上的時候再把內(nèi)容同步到網(wǎng)絡(luò)上。
    • HTML5離線應(yīng)用的運行機制是：為每個需要離線使用的網(wǎng)頁都制定一個.mainfest文件，這個文件羅列了該網(wǎng)頁離線使用時所需要的的所有資源文件。支持離線Web應(yīng)用的瀏覽器會自動讀取.mainfest文件，下載所羅列的資源列表并緩存至本地以備網(wǎng)絡(luò)斷開時使用。

第6章 用CSS3創(chuàng)造令人驚艷的美

一點小感受：總覺得自發(fā)的細(xì)致閱讀一本書是很沒有動力來源和成效的事情，因為沒有應(yīng)用到具體項目中，你不會想深究。目前所看的這些章節(jié)除了前三章外即時如此，其實只需要有個概念在腦袋中，真的用到的時候有搜索引擎在手然后就行了。急切想翻閱完畢要開始看Linux相關(guān)的書籍了~ 以下為第6章簡略筆記：

  • 使用CSS3可以替代圖片減少http請求。
  • 需要添加瀏覽器私有前綴來保證最大的瀏覽器兼容性，或者使用一些JavaScript，它會自動為CSS3追加瀏覽器私有前綴。

6.1 文字陰影

  • text-shadow: 1px 1px #cccccc; 參數(shù)分別表示右側(cè)陰影大小，下側(cè)陰影大小，模糊距離）。
  • 顏色可以使用hex、hsl、rgb顏色。
  • 大小可以使用px、em、rem。
  • 還可以用逗號分隔的方式使用多重文字陰影。

6.2 盒陰影

  • 盒陰影的語法和文字陰影完全一樣。
  • 可以將text-shadow后的第一個參數(shù)指定為inset來設(shè)置內(nèi)陰影。
  • 同樣可以設(shè)置多重陰影。

6.3 背景漸變

  • 線性背景漸變，方法為設(shè)定起點、過渡點、終點的顏色方案。
  • 徑向背景漸變，可以設(shè)置發(fā)散形式的漸變，可選擇的類型（圓、橢圓等）很多，能做出很酷炫的效果。
  • 重復(fù)漸變。

6.4 背景漸變圖案

  • 有一些家伙用CSS的背景技術(shù)制作了一些圖案能夠在背景中漸變，沒有美工或者帶寬有限減少用大圖的時候，或許是個選擇。

6.5 CSS3的響應(yīng)性

  • 針對上述學(xué)習(xí)的特性，務(wù)必記得針對不同的視口做不同的聲明。
  • 為了瀏覽器兼容性，書寫CSS3需要私有前綴，還有一種快速編寫CSS3的方法，就是使用CSS預(yù)處理器，比如最流行的SASS和LESS（聞名已久未曾用過）。

6.6 組合使用CSS3屬性

略（結(jié)合該書開篇的案例來操作一把上面的新屬性）。

6.7 多重背景圖片

  • 在CSS3中我們可以使用多重背景，各自有個子的大小和位置，相互之間用逗號隔開就行。

6.8 更多CSS特性

  • 上面是介紹的只是CSS3的一小部分但屬于最常用的。

6.9 可縮放圖標(biāo)：響應(yīng)式設(shè)計中的完美選擇

  • @font-face圖標(biāo)就是將字符做成圖標(biāo)的特定字體，以往我們的需要使用很多的圖標(biāo)圖片，或者組合成一張很大的圖，現(xiàn)在只需要用一種字體就涵蓋所有需要的圖標(biāo)。比較流行的比如font-awesome就是這樣的原理（哦，原來如此~）。

第7章 CSS3過渡、變形和動畫

7.1 什么是CSS3過渡以及如何使用它

  • 一個超鏈接默認(rèn)設(shè)置了一個樣式，當(dāng)鼠標(biāo)hover上去的時候可能會應(yīng)用到另外一個樣式，這就是一個過渡。過渡可以針對屬性來過渡，比如當(dāng)hover發(fā)生時候過渡。

  • 過渡涉及四個屬性：

    • transition-property 要過渡的屬性名稱，比如background-color或all
    • transition-duration 定義過渡效果持續(xù)的時間
    • transition-timing-function 定義過渡期間速度如何變化
    • transition-delay 可選，定義過渡開始前的延遲事件

  • 單獨使用各種過渡屬性創(chuàng)建效果的語法如下：

    #content a {
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease;
    transition-delay: 0s;
}

  • 簡寫語法如下

    transition: all 1s ease 0s;

  • 也可以在不同的時間段內(nèi)過渡不同的屬性

    #content a {
    /* other setting */
    transition-property: border, color, text-shadow; 
    transition-duration: 2s, 3s, 8s;
}

  • 過渡調(diào)速函數(shù)，不太理解可以參考這里

7.2 CSS3中的2D變形

  • 有兩種可用的CSS3變形：2D變形和3D變形。其中2D變形實現(xiàn)更廣泛，它允許我們使用如下變形：
    • scale：用來縮放大小
    • translate：在屏幕內(nèi)移動元素
    • rotate：按照一定的角度旋轉(zhuǎn)元素
    • skew：按照X和Y軸對元素進(jìn)行斜切
    • matrix：將上述若干變形效果組合成單個聲明，并允許你用像素精度來控制變形效果
  • 實際項目中可以使用傻瓜矩陣變形工具來完成這樣的事情。
  • transform-origin可以用來修改變形效果的起點。

7.3 嘗試CSS3的3D形變

  • CSS3的3D形變能創(chuàng)造非常酷的效果，但相對2D的瀏覽器支持性要差一些。

7.4 CSS3動畫效果

如下是一個給h5加上陰影動畫的例子，最開始定義一個關(guān)鍵幀的名字，以及在動畫進(jìn)行到多少的時候的效果，然后在元素h5應(yīng)用。當(dāng)然如果想要在特定瀏覽器上執(zhí)行，得要給 @keyframes 和 animation 都加上私有前綴。

@keyframes warning {
  from {
    text-shadow: 0px 0px 4px #000000;
  }
  50% {
    text-shadow: 0 0 40px #000000;
  }
  to {
    text-shadow: 0 0 4px #000000;
  }
}


.back h5 {
    font-size: 4em;
    color: #f2050b;
    text-align: center;
    animation: warning 1.5s infinite ease-in;
}

動畫可以采用的參數(shù)有七個可以獨立設(shè)置的屬性值，除了像下面這樣列出來你也可以像上例那樣寫縮寫。

animation-name: warning;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-play-state: running;
animation-delay: 0s;
animation-fill-mode: none;

CSS3過渡讓效果的初始按照可定義的速度進(jìn)行，形變使使得元素大小、偏移等值脫離初始，動畫則定義了一個變化的過程，三者結(jié)合起來能產(chǎn)生非常豐富的效果。 該書示例有結(jié)合示例進(jìn)行演示，在此跳過，有興趣可以自己參考~

7.5 本章小結(jié)

本章學(xué)習(xí)了CSS3過渡、形變和動畫的內(nèi)容，學(xué)習(xí)這些新特性的最終目的是使用CSS3來替代JavaScript制作一些優(yōu)雅降級的增強效果，從而使代碼更簡潔和豐富。下一章將開始學(xué)習(xí)表單中HTML5和CSS3的應(yīng)用。

第8章 用HTML5和CSS3征服表單

8.1 HTML5表單

HTML5表單不僅包含了一些新的視覺元素，還具備了基本的客戶端驗證的功能，而過去這些一般都需要依賴JavaScript。如下列舉了這些新的表單特性：

8.1.1 一個示例表單構(gòu)建
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <!-- 首先定義了一個id為redemption的表單 -->
    <form id="redemption" method="post">
        <!-- hgroup中的h1和h2用于顯示標(biāo)題和說明文字 -->
        <hgroup>
            <h1>Oscar Redemption</h1>
            <h2>Here's your chance to set the record straight: tell us what
                year the wrong film got nominated, and which film <b>should</b>
                have received a nod...</h2>
        </hgroup>
    </form>

    <fieldset>
        <legend>About the offending film (part 1 of 3)</legend>
        <div>
            <label for="film">The film in question?</label>
            <input id="film" name="film" type="text" placeholder="e.g. King 3
                Kong" required aria-required="true" >
        </div>
    </fieldset>
</body>
</html>

因為書中的例子其實并沒有提供連貫的例子，如下只貼出一些片段用于粘貼在上面的表單示例中方便查看效果。

8.1.2 placeholder

占位符是HTML5表單中非常頻繁被使用的一個屬性，輸入框獲取焦點后會自動消失。

8.1.3 required

為確保表單必須輸入值，可以添加required屬性，當(dāng)輸入不符合條件時候瀏覽器會給出提示，并且表單默認(rèn)不會提交。注：aria-required是為了方便屏幕閱讀器用戶，第四章有介紹過WAI-ARIA。

8.1.4 autofocus

autofocus可以讓表單加載完成時就有一個表單域被默認(rèn)自動聚焦。

<fieldset>
    <legend>autofocus example</legend>
    <div>
        <label for="search">Search the site...</label>
        <input id="search" name="search" type="search" placeholder="Wyatt Earp"
            autofocus>
    </div>
</fieldset>
8.1.5 autocomplete

很多瀏覽器提供了自動完成功能來幫助用戶完成輸入，但是通常會關(guān)閉這個功能，因為它不僅能保護(hù)敏感數(shù)據(jù)（例如銀行卡賬戶），還可以讓用戶用心填寫表單而不是隨便輸入一個值（使用者可能通過自動完成來選擇曾填寫過的假的電話號碼）。

下面的代碼是一個禁止自動完成的表單項：

<fieldset>
    <legend>autocomplete example</legend>
    <div>
        <label for="tel">Telephone (so we can berate you if you're wrong)</label>
        <input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required aria-required="true" >
    </div>
</fieldset>

也可以給表單本身設(shè)置屬性來禁止整個表單的自動完成功能：

<form id="redemption" method="post" autocomplete="off">

autofus可以讓表單加載完成時就有一個表單被默認(rèn)自動聚焦。

8.1.6 list及對應(yīng)的detail元素
<fieldset>
    <legend>list example</legend>
    <div>
        <label for="awardWon">Award Won</label>
        <input id="awardWon" name="awardWon" type="text" list="awards"> 
        <datalist id="awards">
            <select>
                <option value="Best Picture"></option>
                <option value="Best Director"></option>
                <option value="Best Adapted Screenplay"></option>
                <option value="Best Original Screenplay"></option>
            </select>
        </datalist>
    </div>
</fieldset>

使用了list屬性的輸入框看起來就是一個普通的文本輸入框，list屬性的值就是datalist元素的id，開始輸入時會顯示一個數(shù)據(jù)選擇框。注：使用select包裹option是為了便于老版本瀏覽器的降級。

8.1.7 HTML5的新輸入類型
  • 郵箱地址 <input type="email" />
  • 數(shù)字 <input type="number"/>
  • URL地址 <input type="url"/>
  • 電話號碼 < input type="tel"/>
  • 搜索輸入框 <inputtype="search"/>和普通文本框表現(xiàn)一樣只是個別瀏覽器渲染上有細(xì)微差別
  • 正則表達(dá)式 <input pattern="([a-zA-Z])"/>
  • 顏色選擇器 <input type="color"目前很少瀏覽器支持該特性（@13年）
  • 滑動條 <input type="range" min="1" max = "10" />
8.1.8 日期和時間輸入類型

如下多種的日期時間輸入類型提供了不同的度量單位，輸出結(jié)果值會略有不同：

  • date
  • month
  • week
  • time
  • datetime和datetime-local

8.2 如何給不支持新特性的瀏覽器打補丁

盡管說了很多HTML5表單的新特新，但實際使用的時候 （1）支持表單新特性的瀏覽器在具體實現(xiàn)上有所不同（2）對完全不不支持新特的瀏覽器如何處理。

第四章提過一個Modernizr的JavaScript框用于向缺少HTML5/CSS3特性支持的瀏覽器打補丁，Webshims Lib就是構(gòu)建于Modernizr和jQuery之上的。

它利用了Modernizr的加載功能，只加載實際所需要的補丁。

通過打補丁不僅使老版本的瀏覽器受益，很多新的劉瀏覽器也沒有完全實現(xiàn)HTML5的表單特性，網(wǎng)頁中引入Webshims Lib可以修補這些瀏覽器的缺陷。

Webshims Lib的使用很簡單：

  1. 下載Webshims Lib包，解壓
  2. 從包解壓出來的文件夾中導(dǎo)入依賴的jQuery、Modernizr、polyfiller文件
  3. 執(zhí)行javascript: $.webshims.polyfill() 來初始化腳本用于加載所需的補丁

8.3 使用CSS3美化HTML5表單

作者使用第七章介紹的CSS3知識，用類似圓角、陰影等屬性稍微潤色了下表單，此處略過。除了之前學(xué)習(xí)的CSS3屬性外，CSS3還專門提供了一些針對表單的偽類選擇器：

  • input:required
  • input:focus:invalid
  • input:focus:valid

可以通過這些偽類來書寫一些樣式規(guī)則，從而增強表單的用戶體驗。

8.4 小結(jié)

本章學(xué)習(xí)了如何使用一堆新的HTML5表單屬性，從而讓表單更加好用。并且我們介紹了如何使用工具來進(jìn)行JavaScript對象檢測有條件地加載JavaScript補丁腳本，從而保證這些在新舊瀏覽器上都能提供類似的用戶體驗。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容