Media Queries 與 CSS

转载自:http://hsinyu00.wordpress.com/2011/04/05/mobile-web-media-queries/

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後面列的條件就是對應HTMLmedia=“…..”> 引號內的東西。在@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/

黑龙江融博创世科技有限公司

http://www.rbcs.com.cn

防伪 防串货 专家

爱手游网站 http://www.iwsjyx.com,手机游戏

你可能感兴趣的:(Web)