5.Media Query (媒體查詢)

一、使用方法

這是達成RWD(Responsive Web Design，嚮應式網頁)的主要方式，有下列三種使用方法：

1. 寫成HTML TAG，並利用media屬性(建議)：<link href="file.css" rel="stylesheet" type="text/css" media="logic media and (expression)">
2. 在<style>元素的內嵌文字或CSS樣式表中，使用@import載入CSS樣式表： @import url(‘file.css’) logic media and (expression) {…}
3. 在<style>元素的內嵌文字或CSS樣式表中，使用@media載入CSS片段：@media logic media and (expression)

二、語法

1. 語法：<logic> <media> and (expression1) and (expression2) ,
<logic> <media> and (expression1) and (expression2) ...
{rule}
2. logic: 可以是only(新型瀏覽器可省略) 或 not，表示是否只套用(大部份用來預防舊瀏覽器看不懂media query)或不套用該規則，例如：@media not all and (monochrome) { ... }等同於@media not (all and (monochrome)) { ... }
3. media: 媒體類型
   

   all	所有媒體類別
   aural	言語合成器
   braille	布拉耶點字法 (盲人用) 媒體
   handheld	掌上型媒體
   print	列印
   projection	投射媒體
   screen	電腦螢幕
   tty	固定字寬 (fixed-pitch) 的媒體
   tv	電視類的媒體

4. expression:條件表示式，以feature:value表示，常用的特徵(feature)有下列幾種：
   width: 即瀏覽器viewport寬度(包含捲動條)，可附加前綴max-及min-
   height: 即瀏覽器viewport高度(包含捲動條)，可附加前綴max-及min-
   aspect-ratio:顯示比例，可附加前綴max-及min-，例如電影螢幕常為16/9
   orientation: 裝置為直向(portrait)或縱向(landscape)
   device-width: 即裝置寬度，可附加前綴max-及min-
   在iOS (iPhone、iPad)和Android等裝置上，不管是縱向或橫向模式，都會給定最短邊為deviec-width，
也就是320x480的裝置，device-width都會是320device-height: 即裝置高度，可附加前綴max-及min-
   device-aspect-ratio:裝置顯示比例，可附加前綴max-及min-
   其它feature可參照mozilla網頁。
   

三、瀏覽器相容性

1. IE 9 以上才支援Media Query，若要解決此問題，可利用如下語法：<link href="basic.css" rel="stylesheet" type="text/css" media="screen">
<link href="desktop.css" rel="stylesheet" type="text/css" media="screen and (min-device-width: 480px)">
<!--[if lt IE 9]>
<link href=”desktop.css” rel="stylesheet" type="text/css" media="screen”>
<![endif]-->
2. 或者使用 Respond.js 讓IE6-8能支援Media Query

四、範例 & 練習

1. 範例5-1：隨著瀏覽器寬度，而改變文字樣式
2. 範例5-2：隨著瀏覽器直或橫向顯示，而改變排列方法
3. 範例5-3：隨著瀏覽器寬度，而改變正方形的大小
4. 練習5-1：建立一個含有圖片的網頁，可隨瀏覽器寬度，而改變圖片大小( >1024, width=100%)(<=1024, width=50%)