iT邦幫忙

DAY 25
5

上一篇文章: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


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#24-- 自適應使用者介面 #1
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#26-- 先進圖形 / Canvas API
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30

尚未有邦友留言

立即登入留言