上一篇文章：MIS2000Lab.的「HTML5 從零開始」#24-- 自適應使用者介面（Adaptive User Interface）#1

http://ithelp.ithome.com.tw/question/10160610

透過CSS來偵測使用者週邊的各種型態，並創造一個自適應（Adaptive）的使用者介面（UI）。
重點在於：針對不同的週邊採用不同的CSS（樣式表），讓使用者不論採用哪種週邊都能獲得最佳瀏覽感受。

==== CSS媒體型態（Media Types） ====

以前的HTML4可以在表頭（）的<link media=”...”>裡面加入各種媒體屬性（media attribute）。

以下都是HTML4認可的：

[ul] [li]speech：合成語音。[/li] [li]braille：盲人點字、觸覺回饋的螢幕閱讀器（Screen Reader）。[/li] [li]embossed：盲人印表機（透過浮出的點狀物，進行文字閱讀）。[/li] [li]handheld：手持設備（掌上電腦），通常是單色的小螢幕，類似以前的Palm（早期的PDA知名廠牌，可以簡單連網）。此規格於1999年出現。[/li] [li]print：列印前的預覽畫面、或是印表機的紙本輸出。[/li] [li]projection：投影機。[/li] [li]screen：電腦螢幕。[/li] [li]tty：終端機、電子打字機（Teletypes）。[/li] [li]tv：電視、或是其他低解析度的螢幕。[/li] [li]all：可用於所有週邊的。[/li][/ul]

==== 透過Media Queries偵測使用者週邊的功能 ====

HTML5與CSS3的Media Queries加強了媒體型態（Media Types）的概念，

可以協助開發人員偵測（得知）使用者週邊的畫面大小、方向與解析度。

即使無法確定使用者的週邊，但可以從解析度480px（或更低的解析度）推估他拿的可能是智慧型手機，如此便能使用適當的畫面配置來輸出網頁。

Media Query有兩種類型：

[ul] [li]Media Type，例如螢幕、印表機或語音等等。[/li] [li]一組括號（parentheses）包含了可以查詢出設備、冒號（：，colon）與目標值，例如screen and (max-device-width: 480px)。[/li][/ul]

下面這一段Media Query是透過HTML的<link>標籤與CSS來偵測，如果找到合適的媒體特性就會沿用搭配的CSS。

更完整的作法可以參閱W3C網站 -- http://www.w3.org/TR/css3-mediaqueries/

// 註解：第一種作法。
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" media="print" href="serif.css">

行動設備優先（Mobile-First）的Media Query方法如下。

/* 以行動週邊為主的樣式，預設寬度採用480px */
article {
column-count: 1;
line-height: 1.6;
font-size: 12px;
width: 98%;
}
@media (max-width: 600px) {
.article {
font-size: 14px;
width: 90%;
}
}
@media (max-width: 800px) {
.article {
column-count : 2;
line-height: 1.5;
width: 70%;
}
}
/*note min-width here, not max-width*/
@media (min-width: 1200px) {
.article {
column-count : 3;
width: 60%;
font-size: 16px;
line-height : 1.7;
}
}

另外還有一些重點，礙於篇幅不再這裡討論

[ul] [li]透過註解的方式偵測舊版IE瀏覽器[/li][/ul]

<!--[if IE 9]>
<p>您使用的是Internet Explorer 9.</p>
<![endif]-->

[ul] [li]列印時的CSS樣式[/li][/ul]

<link rel="stylesheet" type="text/css" href="print.css" media="print" />
@media print {
.. 註解：請把列印的規則寫在這裡。 ..
}

如果您要閱讀其他文章（我寫的）也是RWD / Bootstrap的文章，可以到我的網站看看：
http://www.dotblogs.com.tw/mis2000lab/Tags/bootstrap/default.aspx

文章列表如下：

[ul] [li]
[h2]簡單的Bootstrap(v 2.3.2版)效果與入門教學 -- 響應式網頁 / 自適應網頁(Responsive Web)設計[/h2]
[/li] [li]
[h2]簡單的Bootstrap(v 3.0.0版)效果與入門教學 (#2 範例修正與下載)[/h2]
[/li] [li]
[h2][RWD]黯然銷魂 之 HTML KickStart套件，太好用了，以後用不到怎麼辦？ --響應式網頁 / 自適應網頁(Responsive Web)設計[/h2]
[/li] [li]
[h2]bootstrapzero -- 免費的Bootstrap樣板與布景主題[/h2]
[/li][/ul]

上述都是我用過的簡單（入門）套件，各位可以從實作中，親自去體會

下一篇文章：Canvas API http://ithelp.ithome.com.tw/question/10160823

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期：2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item_id=1003110