[CSS][Web] Media Query 隨瀏覽器改變呈現樣式

【如果覺得文章寫的好的話希望能按一下讚或分享喔】

image

圖片來源

隨著使用者瀏覽器類型的不斷改變,現在逐漸流行一種稱為「 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

image

image           image  

 

Tee Gallery:http://teegallery.com/

image

image image
 

 

範例1:隨瀏覽器大小改變背景顏色

這邊用一段很簡單的程式碼來看看效果

範例圖片:

image image image 

 

範例連結: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/ )

image

 

 

 

範例2:隨瀏覽器大小改變排版樣式

這個範例是我從 CSS-Tricks 看來的

範例圖片:

image image image

 

範例連結: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 .. 但是我測試失敗…

 

如果網友們有人知道更好的方法,歡迎提供給我 :P

 

結論

隨著使用者 device 越來越多元化

他們才不管什麼 media query 什麼鬼的,他們只在乎有沒有在 ”他” 的頁面上看到他想要看的東西

網站設計師必須要考量更多層面的問題,才能完成真正達成使用者心目中良好的使用者體驗

在加上現在手機上網的到達率逐漸提勝

所以,未來的網站,開始導入所謂的 Responsive Design 的概念吧。

Related Posts Plugin for WordPress, Blogger...
【如果覺得文章寫的好的話希望能按一下讚或分享喔】

彭其捷

想要做出很棒的產品,所以我寫程式,也研究介面 (UI) 與使用者經驗 (UX),並思考管理的法則。

【Profile】http://about.me/divaka

twitter facebookgooglepluslinkedinbloggertumblrflickryoutubedribbblerssemail


Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/content/63/7692663/html/blog/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273