《響應式web設計》讀書筆記（四）HTML5與CSS3

看了HTML5和CSS3相關的章節，老實講其實我還是挺失望的，并沒有看到像媒體查詢或是流體布局那樣令人激動的東西。更多的是HTML5、CSS3基本知識的介紹。但也不可否認我也有一些收獲，下來就總結一下吧。

    這些語義化标簽可能大家也見過好多次了，本着踏實淡定的讀書原則，這裡還是總結一下吧：

    <section>用來定義文檔中的一個區域（或節）

    <nav>用來定義主導航區域

    <article>獨立的内容片斷，像一篇新聞稿或是部落格

    <aside>與主内容松散相關的部分，比如側邊欄，廣告欄

    <hgroup>用來包裹一組<h1>,<h2>,<h3>标題

    <header>頁面頭部内容

    <footer>頁面底部内容

    <address>聯系資訊、位址資訊

    首先我們從視訊檔案的格式談起，起初HTML5工作組呼籲所有浏覽器支援Ogg格式的視訊檔案，但由于内部的争議，這一标準在最新的規範中被放棄，并且也沒有形成統一的标準。（對此表示無語~），是以現在的情況就是各浏覽器支援某一套視訊和音頻格式，如Safari指支援用<video>和<audio>标簽播放mp4 / H.264 / AAC媒體檔案，firefox和Opera隻支援Ogg和WebM格式的。總之一句話，很亂，沒有标準。

    那在現在這種情況下，我們能怎麼辦呢？幸好還有一個緩兵之計，我們可以為媒體檔案制作不同的版本，如my.mp4、my.ogv，然後在代碼中這麼寫：

    這樣如果浏覽器便能自己找到支援的格式并播放。當然弊端也顯而易見，你必須準備兩份或者更多的視訊檔案，來滿足不同的浏覽器。在這裡我們要情不自禁的呐喊了，标準啊，快點釋出吧。再補充一點，如果你想支援IE8及以下版本播放視訊，可以在<source>标簽下面再加<object>标簽，使用flash來播放視訊。

    如何能讓視訊也能響應頁面的大小變化呢，答案其實很簡單：照圖檔的處理做就行。寬度設為百分比，高度為auto就可以了。另外一點值得一提，那就是在iframe中播放視訊，如YouTube的做法；

    在iframe中的視訊是無法自适應的。那怎麼辦呢？用這一款jQuery插件吧：FitVids。需要的可以搜搜。由于無法通路YouTube，我這裡沒有試驗。

    本書後面又講了一些離線web應用相關的内容，與響應式設計沒有任何關系，是以我懷疑作者是拿來湊數的，吐槽一下。HTML5相關的東西就提了這麼多。下面來看看CSS3部分的内容吧。

    本書作者十分推崇CSS3，認為這是響應式設計的重要内容，那麼，CSS3可以為響應式設計做些什麼呢？

    在CSS3屬性未被W3C批注為标準或者是浏覽器未完全實作時，各浏覽器廠商都會通過私有字首進行實驗性的實作，比如，要做一個10像素的圓角，各浏覽器的私有字首如下：

    我的媽呀，一個圓角要寫這麼一堆代碼！我光寫最後一句行不行啊？我是不是喊出了大家的心聲呢~

    記得之前在流式布局中提過，為了讓字型大小能自适應，我們用em做字型的機關，這樣字型大小就可以取一個相對值。這是否是真正的響應式字型呢？其實這充其量隻是個僞響應式的，因為這個字型的參照對象是浏覽器預設的字型大小，無論浏覽器的視窗大小如何調整，這個大小都是不變的。而真正的響應式字型應該是能夠随視口的大小進行縮放，就像彈性圖檔一樣。

    半透明顔色。我們以前在網頁中使用顔色的時候都是使用RGB（紅綠藍）體系或是HSL（色相、飽和度、亮度）體系。這兩個體系都是無法表示透明度的。當我們想在網頁中使用半透明的顔色時，要麼使用opacity屬性，要麼使用半透明圖檔來完成。使用opacity的弊端是它會把整個元素包括裡面的内容都變成半透明的，當你僅僅想要半透明的背景時是無法做到的。使用半透明圖檔來做背景的話，就沒什麼問題了。但你付出的代價也是巨大的，就為了一個半透明效果，就使用了一張圖檔。而且在做響應式網頁時還要處理圖檔的縮放問題，也是相當不爽呀。

    來看看CSS3的新顔色模式吧，RGBA和HSLA。多出來的這個A就是指透明度，取值0~1，這樣你就可以在網頁中使用任意透明度的顔色了。省去了使用圖檔了。

    省去圖檔就是為響應式設計做出了貢獻。可以這麼說嗎？如果可以的話，CSS3将為響應式設計做更多的事情。看看下面的這些新特性：文字陰影、盒陰影、漸變，你甚至可以使用多重漸變來繪圖。此處，我将試着來做一個看看。

    就拿我部落格的logo開刀吧~我在css中填了如下樣式：

    主要生效的是圓角和盒陰影，于是，我的logo就華麗麗的變成現在這個樣子了。擡頭看看左上角~

    可縮放圖示。你是不是遇到過這樣的情況：網頁中有一些小圖示，通常隻有16*16或是32*32大小。在響應式頁面中，它們會随着頁面進行縮放，當放大到一定程度時便變模糊了。為了避免模糊你可能會為他們設定固定寬高，但這似乎又不符合響應式頁面的要求。有什麼辦法呢？答案是使用@font-face圖示。什麼？沒聽錯吧？@font-face不是用來自定義字型的嗎？别着急，你可以想想如果把圖示定義成字型，那它豈不是可以像字型一樣設定大小并且完美縮放。這和響應式設計真是天作之合。就是這個思路，搜尋“@font-face圖示”你會找到更多答案。另外有個網站提供了不錯的@font-face圖示，http://fico.lensco.be/   

    後面一章還講了CSS3動畫，需要單獨的一篇文章來記錄。今天的到此為止啦~

本文轉自呂大豹部落格園部落格，原文連結：http://www.cnblogs.com/lvdabao/archive/2013/05/26/3100156.html，如需轉載請自行聯系原作者