Mobile Web 前端技術筆記(二): Media Queries 與 CSS

Media Queries

《基礎》

media queries的作用在偵測device的尺寸和方向等，指定相對應的CSS檔。使用情境粗分為兩種，一種是用於mobile compatible的網頁，也就是桌機版與行動版共用一份html文件，但要套用不同的排版；另一種是做行動版專用網頁，但想要依照不同的行動裝置給予適當的版面設定。

《用法》

HTML

<link rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 700px)" href="example.css" />

CSS

@media screen and (min-width: 400px) and (max-width: 700px) {
    .selector1{...}
    .selector2{...}
}

意思就是在視窗寬度大於400px但小於700px時，套用example.css這個CSS檔。

CSS檔中，@media後面列的條件就是對應HTML<link media=“…..”> 引號內的東西。在@media{}大括號之內，就如往常一樣撰寫此media條件下的CSS設定。

import CSS的寫法也一樣：

@import "screen.css" screen and (min-width: 400px) and (max-width: 700px)

query條件的用法

@media [media type] and [(media feature)]

單一條件

例：如果視窗最小寬度為500px，就套用這些CSS

@media screen and (min-width:500px) {.....}

例：如果視窗為直立，就套用這些CSS

@media screen and  (orientation: portrait) {.....}

兩者需同時符合

例：如果視窗在400px和700px之間，就套用這些CSS

@media screen and (min-width: 400px) and (max-width: 700px)

兩者符合一種即可

例：如果是彩色螢幕或彩色投影機兩者之一，就套用這些CSS

@media screen and (color), projection and (color) {.....}

以not/only 迴避或強制舊版瀏覽器執行

<link rel="stylesheet" media="not|only screen and (color)" href="example.css" />

某些舊版瀏覽器只能讀media type(screen,projector等等)，不會讀media feature，也不會讀not或only，因此也不會套用此media query後的CSS檔。

《屬性和值》

• media type 有以下幾種：
  all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
• media features
  * (max-或min-)width:[數字]
  * (max-或min-)height:[數字]
  * (max-或min-)device-width:[數字]
  * (max-或min-)device-height:[數字]
  * orientation:portrait 或 landscape
  * aspect-ratio:[比值]
  * (max-或min-)device-aspect-ratio:[比值]
  * color
  * color-index
  * monochrome
  * (max-或min-)resolution:[數字]dpi
  * scan(只對tv)
  * grid

這方面W3C文件也還在W3C Recommandation的階段，也不算進入Standard

很多人關心handheld這個media type，但事實上它已無法有效偵測是否為手機browser。前一代智慧型手機很多用Opera上網，Opera確定是可以辨認這個media type的。

會讀handheld的手機瀏覽器有:
OpenWave, Nokia lite-web browsers, Netfront, Digia, BlackBerry browser, Opera Mini until v4, Opera Mobile until v9,Palm’s Blazer, Nokia S40 browser, IEMobile 6.x and 8.x

(http://www.alistapart.com/articles/putyourcontentinmypocket/)

CSS支援度

目前大部分手機瀏覽器與桌機瀏覽器支援的CSS相差不大，但有需要慎用的的CSS屬性

• overflow
• position:fixed(iphone safari確定不支援)
• font-family:手機上的字型比桌機少
• font-size: 用small, medium, large，最好不要用px設死
• margin與padding的算法可能有個別差異

box model的處理

手機版網頁在自動適應畫面寬度時，目前標準的padding算法會是個困擾，因為如果width:100%，加上padding可能就破版了，但不使用width:100%又很難估計內容的實際寬度。這時可考慮回復到IE6模式，把border和padding的移到box內部，如此一來宣告width為100%就能保證不破版。

div{
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
     -moz-box-sizing: border-box;    /* Firefox, other Gecko */
     box-sizing: border-box;
}

*註:border-box是IE6的模式，content-box是目前的標準模式

行動裝置的CSS reset

行動裝置頻寬寶貴，即使做CSS reset也要保持精簡只reset基本元素。目前網路上所有mobile CSS reset都指向一份文件，

http://www.vcarrer.com/2010/11/css-mobile-reset.html

他的CSS reset只有短短幾個元素而已

/* CSS Mobile Reset */
html, body
{
 margin: 0;
 padding: 0;
 border: 0;
}

body
{
 font-family:Arial,  sans-serif;
 line-height:1.5;
 font-size:16px;
 background: #fff;
 padding:5px;
 color: #000;
 word-wrap: break-word;
 -webkit-text-size-adjust: none;
}

h1, h2, h3, h4, h5, h6{ font-weight: normal; }

p img { float: left; margin: 0 10px 5px 0; padding: 0; }

img { border: 0; max-width: 100%; }

table { width:auto; border-collapse: collapse;border-spacing: 0; }

簡單來說就是保持輕巧，不需要的元素就不重設。

《備註》

media queries基本上與user agent無關，它僅以辨認當前browser的狀況來因應，而非透過辨認user agent來執行不同的動作。

《資料來源》

1. W3C文件 http://www.w3.org/TR/css3-mediaqueries/
2. 某網友翻譯W3C文件
   http://zetajames.wordpress.com/2010/02/26/css3-media-queries/
3. media feature整理表 http://reference.sitepoint.com/css/mediaqueries
4. 會讀handheld的手機瀏覽器 http://www.alistapart.com/articles/putyourcontentinmypocket/
5. box model的處理 http://css-tricks.com/box-sizing/

...

廣告