| Tweet |
|
隨著使用者瀏覽器類型的不斷改變，現在逐漸流行一種稱為「 Media Query 」的寫法
也就是說，透過讀取使用者瀏覽器的大小，動態改變 CSS 所呈現的內容
本篇寫了一個非常簡單的範例來進行測試 ( ps. IE8 以上不適用)
Media Query 的好處
1. 提升使用者的網頁閱讀體驗，最佳化瀏覽效果
2. 區分桌面版與行動版所呈現的樣式
Media Query 的網站
您可以試著點進去看看這些網站隨著瀏覽器寬度比改變時所顯示的內容
INQUIRER：http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
Tee Gallery：http://teegallery.com/
範例1：隨瀏覽器大小改變背景顏色
這邊用一段很簡單的程式碼來看看效果
範例圖片：
範例連結：http://design2u.me/blog/example/mediaquery/index.html
範例程式碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Design2U - MediaQuery</title>
<meta name="description" content="User Experience,User Experience" />
<meta http-equiv="Content-Language" content="zh-tw" />
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style type="text/css">
@media (max-width: 767px) {
body{ background-color:#4ef700; }
}
@media (max-width: 480px){
body{ background-color:#ff0000; }
}
@media (min-width: 768px) and (max-width: 979px) {
body{ background-color:#008cf7; }
}
@media (min-width: 980px) {
body{ background-color:#f700c6; }
}
@media (min-width: 1200px){
body{ background-color:#f7e200; }
}
</style>
<script type="text/javascript" src="css3-mediaqueries.js"></script>
</head>
<body>
<h1>請試著改變你的瀏覽器視窗寬度</h1>
<p>寬度小於 480 : 紅色</p>
<p>寬度超過 480 : 綠色</p>
<p>寬度超過 768 : 藍色</p>
<p>寬度超過 980 : 紫色</p>
<p>寬度超過 1200 : 黃色</p>
</body>
</html>
應該很直覺，直接看程式碼就可以了解 !
比較特別的觀念是在於說為什麼是 767px , 480px 等值，其實這些值是目前常出現的螢幕 size
下圖有用圖示說明其觀念，應該較好理解 ( image from http://blog.flyworld.me/ )
範例2：隨瀏覽器大小改變排版樣式
這個範例是我從 CSS-Tricks 看來的
範例圖片：
範例連結：http://design2u.me/blog/example/mediaquery/grid.html
範例程式碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Design2U - MediaQuery</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
@media (min-width: 701px) and (max-width: 900px) {
body { background: #333; }
#page-wrap { width: 548px; }
#page-wrap:after { content: "Narrow Layout"; }
#secondary-two { display: none; }
}
@media (min-width: 701px) and (max-width: 900px) {
body { background: #666; }
#page-wrap { width: 700px; }
#page-wrap:after { content: "Medium Layout"; }
#main-content { float: right; width: 440px; height: 300px; }
#secondary-one { float: left; width: 170px; height: 300px; }
#secondary-two { display: none; }
}
@media (min-width: 901px){
body { background: #999; }
#page-wrap { width: 900px; position: relative; }
#page-wrap:after { content: "Wide Layout"; }
#main-content { float: left; width: 440px; height: 300px; margin-left: 218px; }
#secondary-one { width: 170px; height: 300px; position: absolute; left: 0; top: 64px; }
#secondary-two { float: right; width: 153px; height: 300px; }
}
</style>
</head>
<body>
<div id="page-wrap">
<div id="header">Header</div>
<div id="main-content">Content</div>
<div id="secondary-one">Secondary</div>
<div id="secondary-two">Extra</div>
</div>
</body>
</html>
其實就是用 701 和 901 做為分界
當使用者的螢幕 size 改變時，判斷應該用哪一套 CSS (共三套) 呈現，達到動態呈現使用者最佳瀏覽效果的體驗
偵測 Device 為 iPhone 或 iPad
如果想要客製 iPhone 上面看到的樣式，可使用以下語法動態載入 CSS
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="css/iphone.css">
iPad 的語法如下 ：
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
參數列表
Media Query 可接受的參數列表如下：
W3C MediaQuery：http://www.w3.org/TR/css3-mediaqueries/
| 特色 | 定義 | 可否接受 min/max? |
|---|---|---|
| width | width of display area/viewport | yes |
| height | height of display area/viewport | yes |
| device-width | width of device rendering surface | yes |
| device-height | height of device rendering surface | yes |
| orientation | portrait or landscape | no |
| aspect-ratio | ratio of display’s width to height (16:9, 4:3) | yes |
| device-aspect-ratio | ratio of device rendering surface width to height (16:9, 4:3) | yes |
| color | number of bits per color component of the output device | yes |
| color-index | number of entries in the color lookup table of the output device | yes |
| monochrome | number of bits per pixel in a monochrome frame buffer (0 for non-monochrome devices) | yes |
| resolution | resolution of the output device (pixel density; 72dpi, 300dpi) | yes |
| scan | progressive or scan for tv devices | no |
| grid | grid or bitmap (phone display with one fixed font; tty terminal) | no |
瀏覽器支援
基本上一般的瀏覽器 (Chrome , FF , Sarari , Opera) 都有支援…….但 IE 9 以上才支援此屬性
以下為微軟官方說明
The following CSS3 media query properties are supported in Internet Explorer 9:
- width
- height
- device-width
- device-height
- orientation
- aspect-ratio
- device-aspect-ratio
- color
- color-index
- monochrome
- resolution
網路上有人說以下幾種方式可以讓 IE9 以下版本可使用 mediaquery .. 但是我測試失敗…
如果網友們有人知道更好的方法，歡迎提供給我 
結論
隨著使用者 device 越來越多元化
他們才不管什麼 media query 什麼鬼的，他們只在乎有沒有在 ”他” 的頁面上看到他想要看的東西
網站設計師必須要考量更多層面的問題，才能完成真正達成使用者心目中良好的使用者體驗
在加上現在手機上網的到達率逐漸提勝
所以，未來的網站，開始導入所謂的 Responsive Design 的概念吧。
