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/
...
廣告

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

  1. 引用通告: RWD 實作心得以及行動裝置、iOS 遇到的問題 « 蘿莉控八控恐-控揪離-控控恐 的自由空間 "

  2. 引用通告: CSS Media Queries 介紹與基礎應用 « MUKI space*

  3. 引用通告: 小佳的部落格-自適網頁RWD開發心得

  4. 引用通告: CSS Media Queries 上路 | 封狼的凌亂窩

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s