CSS3 Media Queries 详细介绍与使用方法，Responsive Web Design 必备技术

上一篇我们介绍了 Responsive Web Design之后，这次要来详细介绍CSS3 Media Queries了。 在上一篇中，我們提到Responsive Web Desig n 的實作方式有大半都是利用CSS3 Media Queries 來達成。在上一篇中，我们提到Responsive Web Desig n的实作方式有大半都是利用CSS3 Media Queries来达成。 而顧名思義Media Queries 就是要在支援CSS3 的瀏覽器中才能正常工作，IE8 以下不支援。而顾名思义Media Queries 就是要在支援CSS3 的浏览器中才能正常工作，IE8 以下不支援。 而Media Queries 的套用方法千變萬化，要套用在什麼樣的裝置中，都可以自己來定義。而Media Queries 的套用方法千变万化，要套用在什么样的装置中，都可以自己来定义。

關於Media Queries关于Media Queries

到底什麼是Media Queries ？到底什么是Media Queries ？ 一般我們在開發HTML + CSS 網頁中，都會有一份CSS 來控制網頁的樣式表。一般我们在开发HTML + CSS 网页中，都会有一份CSS 来控制网页的样式表。 而隨著各式各樣不同大小、長寬與解析度的裝置的興起，我們在開發網頁只考慮到自己的螢幕顯示的如何，是多麼的膚淺哪。而随着各式各样不同大小、长宽与解析度的装置的兴起，我们在开发网页只考虑到自己的萤幕显示的如何，是多么的肤浅哪。 So，在開發者的螢幕看到的網頁或許很漂亮，那，其他人的螢幕呢？ So，在开发者的萤幕看到的网页或许很漂亮，那，其他人的萤幕呢？ 所以，我們需要的是能夠控制不同大小的螢幕（裝置），在其上所顯示出來的樣式，讓各式各樣來自不同地方的User 都能夠有最佳的瀏覽體驗。所以，我们需要的是能够控制不同大小的萤幕（装置），在其上所显示出来的样式，让各式各样来自不同地方的User 都能够有最佳的浏览体验。

• 出生年代：CSS3出生年代：CSS3
• 支援狀況：除IE8 以下不支援 外，其餘較新款瀏覽器接皆支援（詳細支援狀況： http://caniuse.com/css-mediaqueries ）支援状况：除IE8以下不支援外，其余较新款浏览器接皆支援（详细支援状况： http://caniuse.com/css-mediaqueries ）

較佳的開發步驟：较佳的开发步骤：

1. 先寫一份在你的螢幕顯示OK 的CSS 樣式。先写一份在你的萤幕显示OK 的CSS 样式。
2. 開始使用Media Queries 在不同裝置上做調整。开始使用Media Queries 在不同装置上做调整。

你可以先看例子你可以先看例子

在國外有一個網站專門蒐集各式各樣的Media Queries 效果，網站名稱就叫做「 Media Queries 」，網址： http://mediaqueri.es/ 。在国外有一个网站专门搜集各式各样的Media Queries效果，网站名称就叫做「 Media Queries 」，网址： http://mediaqueri.es/ 。 進到該網站之後，你會看到每一列都有4 張網站的截圖，從左開始是螢幕寬度較小的行動裝置，一直到右邊則是在傳統PC 的較大螢幕上。进到该网站之后，你会看到每一列都有4 张网站的截图，从左开始是萤幕宽度较小的行动装置，一直到右边则是在传统PC 的较大萤幕上。 而在傳統PC 中，會將許多元素並排；在手機中，會變成只有一行。而在传统PC 中，会将许多元素并排；在手机中，会变成只有一行。

<img class="size-full wp-image-1942 alignnone" title="2" src=http://fundesigner.net/wp-content/uploads/2012/11/21-e1352292545338.jpg alt="" width=770 height=275 />

Media Queries 怎麼寫 Media Queries 怎么写

Media Queries 其實說簡單也很簡單，你可以只使用下面的幾行CSS，再針對不同裝置去設CSS 屬性就好了。 Media Queries 其实说简单也很简单，你可以只使用下面的几行CSS，再针对不同装置去设CSS 属性就好了。 這個段落將由淺入深，從最簡單、最Easy、最沒挑戰性的使用寬度來玩。这个段落将由浅入深，从最简单、最Easy、最没挑战性的使用宽度来玩。

Media Queries 有兩種使用方法 Media Queries 有两种使用方法

• 在同一個CSS 檔案中，用Media Queries @media 來判斷使用者之螢幕寬度，選擇載入哪一段CSS。在同一个CSS 档案中，用Media Queries @media 来判断使用者之萤幕宽度，选择载入哪一段CSS。
• 在HTML 的<link> 載入的地方，用media 屬性判斷使用者之裝置/ 視窗寬度，選擇載入哪一個CSS 檔案。在HTML 的<link> 载入的地方，用media 属性判断使用者之装置/ 视窗宽度，选择载入哪一个CSS 档案。

以上兩種則一即可，使用第一種的話要寫好幾遍<link> 標籤，另一種要在同一個CSS 檔案中寫好幾遍@media。以上两种则一即可，使用第一种的话要写好几遍<link> 标签，另一种要在同一个CSS 档案中写好几遍@media。 效果相同，選擇自己喜歡的方式即可。效果相同，选择自己喜欢的方式即可。 （網路上的Framework 都是第1種，如Bootstrap。） （网路上的Framework 都是第1种，如Bootstrap。）

@media 用寬度( width ) 判斷 @media 用宽度( width ) 判断

下面的語法，是最常用到的Media Queries：（下方為同一檔案之內容）下面的语法，是最常用到的Media Queries：（下方为同一档案之内容）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<span class= "notranslate" onmouseover= "_tipon(this)" onmouseout= "_tipoff()" ><span class= "google-src-text" style= "text-align: left; direction: ltr;" >//全部的使用者都會載入這裡的CSS。</span> //全部的使用者都会载入这里的CSS。</span>   <span class= "notranslate" onmouseover= "_tipon(this)" onmouseout= "_tipoff()" ><span class= "google-src-text" style= "text-align: left; direction: ltr;" >@media screen and ( min-width : 1200px ) {</span> @media screen and ( min-width : 1200px ) {</span>      <span class= "notranslate" onmouseover= "_tipon(this)" onmouseout= "_tipoff()" ><span class= "google-src-text" style= "text-align: left; direction: ltr;" >// 如果使用者之視窗寬度>= 1200px ，將會再載入這裡的CSS。</span> // 如果使用者之视窗宽度>= 1200px ，将会再载入这里的CSS。</span> <span class= "notranslate" onmouseover= "_tipon(this)" onmouseout= "_tipoff()" ><span class= "google-src-text" style= "text-align: left; direction: ltr;" >}</span> }</span>   <span class= "notranslate" onmouseover= "_tipon(this)" onmouseout= "_tipoff()" ><span class= "google-src-text" style= "text-align: left; direction: ltr;" >@media screen and ( min-width : 768px ) and ( max-width : 979px ) {</span> @media screen and ( min-width : 768px ) and ( max-width : 979px ) {</span>      <span class= "notranslate" onmouseover= "_tipon(this)" onmouseout= "_tipoff()" ><span class= "google-src-text" style= "text-align: left; direction: ltr;" >// 如果使用者之視窗寬度介於 768px ~ 979px ，將會再載入這裡的CSS。</span> // 如果使用者之视窗宽度介于 768px ~ 979px ，将会再载入这里的CSS。</span>    <span class= "notranslate" onmouseover= "_tipon(this)" onmouseout= "_tipoff()" ><span class= "google-src-text" style= "text-align: left; direction: ltr;" >}</span> }</span>   <span class= "notranslate" onmouseover= "_tipon(this)" onmouseout= "_tipoff()" ><span class= "google-src-text" style= "text-align: left; direction: ltr;" >@media screen and ( max-width : 767px ) {</span> @media screen and ( max-width : 767px ) {</span>      <span class= "notranslate" onmouseover= "_tipon(this)" onmouseout= "_tipoff()" ><span class= "google-src-text" style= "text-align: left; direction: ltr;" >// 如果使用者之視窗寬度<= 768px ，將會再載入這裡的CSS。</span> // 如果使用者之视窗宽度<= 768px ，将会再载入这里的CSS。</span>    <span class= "notranslate" onmouseover= "_tipon(this)" onmouseout= "_tipoff()" ><span class= "google-src-text" style= "text-align: left; direction: ltr;" >}</span> }</span>   <span class= "notranslate" onmouseover= "_tipon(this)" onmouseout= "_tipoff()" ><span class= "google-src-text" style= "text-align: left; direction: ltr;" >@media screen and (max-device- width : 480px ) {</span> @media screen and (max-device- width : 480px ) {</span>      <span class= "notranslate" onmouseover= "_tipon(this)" onmouseout= "_tipoff()" ><span class= "google-src-text" style= "text-align: left; direction: ltr;" >// 如果使用者之裝置寬度<= 480px ，將會再載入這裡的CSS。</span> // 如果使用者之装置宽度<= 480px ，将会再载入这里的CSS。</span> <span class= "notranslate" onmouseover= "_tipon(this)" onmouseout= "_tipoff()" ><span class= "google-src-text" style= "text-align: left; direction: ltr;" >}</span> }</span>

在Media Queries 中，我們最常使用min-width 和max-width 來判斷使用者的視窗寬度，而max-device-width 則是使用者「裝置」的最大寬度。在Media Queries 中，我们最常使用min-width 和max-width 来判断使用者的视窗宽度，而max-device-width 则是使用者「装置」的最大宽度。 width 和device-width 差在哪裡？ width 和device-width 差在哪里？

• width : 因為瀏覽器可以自由調整寬度，所以這邊指的是該瀏覽視窗的寬度。 width : 因为浏览器可以自由调整宽度，所以这边指的是该浏览视窗的宽度。
• device-width : 就算你把瀏覽器視窗弄到符合最大(小)寬度，還是不會生效。 device-width : 就算你把浏览器视窗弄到符合最大(小)宽度，还是不会生效。 因為，device-width 指的是使用者的「裝置」最大寬度，而不是瀏覽器視窗。因为，device-width 指的是使用者的「装置」最大宽度，而不是浏览器视窗。 所以，device-width 常用在判斷手機上。所以，device-width 常用在判断手机上。

所以，你也可以自己加上其他的條件下去。所以，你也可以自己加上其他的条件下去。 要注意的是，每一個條件之間請用and 來分隔，並要適時加上括號以免錯誤。要注意的是，每一个条件之间请用and 来分隔，并要适时加上括号以免错误。

min-width 是最小寬度；max-width 是最大寬度，可以用來表示一定的範圍。 min-width 是最小宽度；max-width 是最大宽度，可以用来表示一定的范围。

<link> 寫在HTML 裡頭的判斷 <link> 写在HTML 里头的判断

上一節的語法，你也可以把它個別拆成好幾個檔案，然後用HTML 的<link> 來載入並且判斷。上一节的语法，你也可以把它个别拆成好几个档案，然后用HTML 的<link> 来载入并且判断。 下面為HTML 代碼：下面为HTML 代码：

1 2 3 4 5

< span class = "notranslate" onmouseover = "_tipon(this)" onmouseout = "_tipoff()" >< span class = "google-src-text" style = "text-align: left; direction: ltr;" >< link rel = "stylesheet" type = "text/css" href = "all.css" media = "screen" ></ span > < link rel = "stylesheet" type = "text/css" href = "all.css" media = "screen" ></ span > < span class = "notranslate" onmouseover = "_tipon(this)" onmouseout = "_tipoff()" >< span class = "google-src-text" style = "text-align: left; direction: ltr;" >< link rel = "stylesheet" type = "text/css" href = "a.css" media = "screen and (max-width: 767px)" ></ span > < link rel = "stylesheet" type = "text/css" href = "a.css" media = "screen and (max-width: 767px)" ></ span > < span class = "notranslate" onmouseover = "_tipon(this)" onmouseout = "_tipoff()" >< span class = "google-src-text" style = "text-align: left; direction: ltr;" >< link rel = "stylesheet" type = "text/css" href = "b.css" media = "screen and (min-width: 768px) and (max-width: 979px)" ></ span > < link rel = "stylesheet" type = "text/css" href = "b.css" media = "screen and (min-width: 768px) and (max-width: 979px)" ></ span > < span class = "notranslate" onmouseover = "_tipon(this)" onmouseout = "_tipoff()" >< span class = "google-src-text" style = "text-align: left; direction: ltr;" >< link rel = "stylesheet" type = "text/css" href = "c.css" media = "screen and (min-width: 1200px)" ></ span > < link rel = "stylesheet" type = "text/css" href = "c.css" media = "screen and (min-width: 1200px)" ></ span > < span class = "notranslate" onmouseover = "_tipon(this)" onmouseout = "_tipoff()" >< span class = "google-src-text" style = "text-align: left; direction: ltr;" >< link rel = "stylesheet" type = "text/css" href = "d.css" media = "screen and (max-device-width: 480px)" ></ span > < link rel = "stylesheet" type = "text/css" href = "d.css" media = "screen and (max-device-width: 480px)" ></ span >

我們就可以用link 中的media 屬性來判斷使用者的視窗/ 裝置寬度，如上。我们就可以用link 中的media 属性来判断使用者的视窗/ 装置宽度，如上。 之後，在每一個css 檔案中你就可以寫若使用者寬度符合條件的CSS 。之后，在每一个css 档案中你就可以写若使用者宽度符合条件的CSS 。 如a.css 中，就是要寫如果使用者之視窗寬度<= 768px，要再載入的CSS。如a.css 中，就是要写如果使用者之视窗宽度<= 768px，要再载入的CSS。

注意事項注意事项

在Media Queries 中的CSS，其效果是覆蓋原本預設的CSS。在Media Queries 中的CSS，其效果是覆盖原本预设的CSS。 所以，你要先有一份完整的CSS，再使用Medai Queries，對細部元素做調整。所以，你要先有一份完整的CSS，再使用Medai Queries，对细部元素做调整。 所以，絕對不是把全部的CSS 複製一遍到Media Queries 中再修改喔！所以，绝对不是把全部的CSS 复制一遍到Media Queries 中再修改喔！

Viewport Viewport

如果網頁沒有做Responsive Web Design 的話，手機的瀏覽器會自動假裝解析度變很大，會讓網頁完整顯示。如果网页没有做Responsive Web Design 的话，手机的浏览器会自动假装解析度变很大，会让网页完整显示。 但是，這就讓字變得很小，使用者還要去做放大而不能直接閱讀。但是，这就让字变得很小，使用者还要去做放大而不能直接阅读。 而這個meta 標籤是為了防止這樣的情形發生( iphone 據說會有此情形)，讓網頁顯示的寬度就直接是裝置的寬度，不會把網頁硬塞。而这个meta 标签是为了防止这样的情形发生( iphone 据说会有此情形)，让网页显示的宽度就直接是装置的宽度，不会把网页硬塞。 這段只要加在HTML 的<head> 裡頭即可。这段只要加在HTML 的<head> 里头即可。

1

< span class = "notranslate" onmouseover = "_tipon(this)" onmouseout = "_tipoff()" >< span class = "google-src-text" style = "text-align: left; direction: ltr;" >< meta name = "viewport" content = "width=device-width; initial-scale=1.0" /></ span > < meta name = "viewport" content = "width=device-width; initial-scale=1.0" /></ span >

針對某裝置下去做設定、快速使用: Media Query Snippets针对某装置下去做设定、快速使用: Media Query Snippets

Media Query Snippets這個網站蒐集了很多行動裝置的@media 條件式，你可以直接複製來使用。 Media Query Snippets这个网站搜集了很多行动装置的@media条件式，你可以直接复制来使用。 如下圖，有一堆的裝置你可以拿去設定：（網址： http://nmsdvid.com/snippets/ ）如下图，有一堆的装置你可以拿去设定：（网址： http://nmsdvid.com/snippets/ ）

&lt;img style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="1" src=http://fundesigner.net/wp-content/uploads/2012/11/11.jpg alt=1 width=770 height=573 border=0 /&gt;

另外，其實你不太需要去對每個裝置都去做調整，基本上使用行動裝置的max-device-width: 480px ，就綽綽有餘了。另外，其实你不太需要去对每个装置都去做调整，基本上使用行动装置的max-device-width: 480px ，就绰绰有余了。 上面的網站，是幫你做個整理，以便不時之需。上面的网站，是帮你做个整理，以便不时之需。

IE8 Hack IE8 Hack

目前在網路上有人製作了讓不支援Media Queries 的瀏覽器透過Javascript 的方式也能支援。目前在网路上有人制作了让不支援Media Queries 的浏览器透过Javascript 的方式也能支援。 而目前這個似乎還是有點小問題，實際能不能使用請直接至該網站查詢：而目前这个似乎还是有点小问题，实际能不能使用请直接至该网站查询：

css3-mediaqueries-js – a library that aims to add media query support to non-supporting browsers css3-mediaqueries-js – a library that aims to add media query support to non-supporting browsers

動手吧动手吧

另外，目前網路上也有支援Media Queries 的Framework，如Bootstrap 等等。另外，目前网路上也有支援Media Queries 的Framework，如Bootstrap 等等。 Bootstrap 已經幫你把很多版面在不同裝置的顯示效果設定好，或許你也可以試試看使用這個不錯又簡單的Framework，Bootstrap 。 Bootstrap 已经帮你把很多版面在不同装置的显示效果设定好，或许你也可以试试看使用这个不错又简单的Framework，Bootstrap 。 如果你使用了Bootstrap，還是不代表這篇對你沒有需要，因為像Bootstrap 只有對格局、圖片做變動，而細節的部份，你還是得使用media queries，才能把整個Responsive Web Design做到最好。如果你使用了Bootstrap，还是不代表这篇对你没有需要，因为像Bootstrap只有对格局、图片做变动，而细节的部份，你还是得使用media queries，才能把整个Responsive Web Design做到最好。

（Bootstrap 官網： http://twitter.github.com/bootstrap/ ；本站教學介紹： http://fundesigner.net/twitter-bootstrap/ ） （Bootstrap官网： http://twitter.github.com/bootstrap/ ；本站教学介绍： http://fundesigner.net/twitter-bootstrap/ ）

事實上，Media Queries 只是讓你能夠在不同裝置上做調整，至於調整的好看不好看，就得看大家的CSS 造化如何了，加油！事实上，Media Queries 只是让你能够在不同装置上做调整，至于调整的好看不好看，就得看大家的CSS 造化如何了，加油！