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" />
@media screen and (min-width: 400px) and (max-width: 700px) {
.selector1{...}
.selector2{...}
}
意思就是在視窗寬度大於400px但小於700px時，套用example.css這個CSS檔。
CSS檔中，@media後面列的條件就是對應HTML
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來執行不同的動作。
《資料來源》
- W3C文件 http://www.w3.org/TR/css3-mediaqueries/
- 某網友翻譯W3C文件
http://zetajames.wordpress.com/2010/02/26/css3-media-queries/ - media feature整理表http://reference.sitepoint.com/css/mediaqueries
- 會讀handheld的手機瀏覽器http://www.alistapart.com/articles/putyourcontentinmypocket/
- box model的處理 http://css-tricks.com/box-sizing/
黑龙江融博创世科技有限公司
http://www.rbcs.com.cn
防伪 防串货 专家
爱手游网站 http://www.iwsjyx.com，手机游戏