HTML5、CSS3響應式設計——筆記 - X-Jonney－IT工程師數位筆記本

文章出處

1.1、響應式網頁設計

響應式網頁設計（RWD，Responsive Web Design）這個術語，由伊桑·馬科特（Ethan
Marcotte）提出。他在A List Apart 發表了一篇開創性的文章，將三種已有的開發技巧（彈
性網格布局、彈性圖片、媒體和媒體查詢）整合起來，并命名為響應式網頁設計。這個
術語還有一堆表示相同意思的其他叫法，如流式設計、彈性布局、塑料布局、流體設計、
自適應布局、跨設備設計以及彈性設計。

1.2、瀏覽器視口調試工具

Internet Explorer 用戶請下載安裝Microsoft Internet Explorer Developer Toolbar，下載地址：http://www.microsoft.com/download/en/details.aspx?id=18359
Safari，雖然ResizeMe（http://web.me.com/aaronholla/Safari_Extensions/ResizeMe.html）的功能類似且免費，但我最愛Resize（http://resizeSafari.com）
Firefox 用戶請下載Firesizer（https://addons.mozilla.org/en-US/firefox/addon/firesizer/）
Chrome 請下載Windows Resizer（https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh）

1.3、視口和屏幕尺寸

視口和屏幕尺寸不是同一個概念。視口是指瀏覽器窗口內的內容區域，不包含工具欄、標簽欄等。也就是網頁實際顯示的區域。屏幕尺寸指的是設備的物理顯示區域。需要注意的是有些瀏覽器調整工具顯示的尺寸包含瀏覽器的其他元素，諸如地址欄、標簽欄和搜索欄，而有些工具則不是這樣。在下面的截圖中，實際的視口尺寸顯示在右上角（1156×921像素），同時Firesizer 插件將窗口尺寸顯示在右下角（1171×1023 像素）。

1.4、HTML5化繁為簡

Doctype簡化為<!DOCTYPE html>
引用<script src="js/jquery-1.6.2.js" type="text/javascript"></script>簡化<script src="js/jquery-1.6.2.js"></script>，type屬性不是必需的。
松散語法<sCRipt SrC=js/jquery-1.6.2.js></script>

5.新語義化標簽

<!--制作標準的HTML 頁面時，頭部和導航一般都是標配，如下所示：-->
<div class="header">
<div class="navigation">
<ul class="nav-list">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
</ul>
</div> <!—end of navigation -->
</div> <!—end of header -->
<!--看看我們用HTML5 如何實現：-->
<header>
<nav>
<ul id="nav-list">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
</ul>
</nav>
</header>

2.1媒體查詢

CSS3 是由很多附加模塊組合而成的，媒體查詢就是其中的一個模塊。媒體查詢可以讓我們根據設備顯示器的特性為其設定CSS 樣式。

2.2媒體查詢檢測的特性

最常用的是設備的視口寬度（width）和屏幕寬度（device-width）。

width：視口寬度。
height：視口高度。
device-width：渲染表面的寬度（對我們來說，就是設備屏幕的寬度）。
device-height：渲染表面的高度（對我們來說，就是設備屏幕的高度）。
orientation：檢查設備處于橫向還是縱向。
aspect-ratio：基于視口寬度和高度的寬高比。一個16∶9 比例的顯示屏可以這樣定義aspect-ratio: 16/9。
device-aspect-ratio：和aspect-ratio 類似，基于設備渲染平面寬度和高度的寬高比。
color：每種顏色的位數。例如min-color: 16 會檢測設備是否擁有16 位顏色。
color-index：設備的顏色索引表中的顏色數。值必須是非負整數。
monochrome：檢測單色幀緩沖區中每像素所使用的位數。值必須是非負整數，如monochrome: 2。
resolution：用來檢測屏幕或打印機的分辨率，如min-resolution: 300dpi。還可以接受每厘米像素點數的度量值，如min-resolution: 118dpcm。
scan：電視機的掃描方式，值可設為progressive（逐行掃描）或interlace（隔行掃描）。如720p HD 電視（720p 的p 即表明是逐行掃描）匹配scan: progressive，而1080i HD 電視（1080i 中的i 表明是隔行掃描）匹配scan: interlace。
grid：用來檢測輸出設備是網格設備還是位圖設備。