布萊恩的創業小窩的部落格

對前端工程師最重要的CSS之一,就是Media Query,詳細的分析請繼續往下看~

RWD 網頁設計必備語法：Media Query

前端工程師在製作 RWD 響應式網頁時，一定會用到的 CSS 語法就是 Media Query。簡單來說，我們可以把 Media 視為 CSS 的擴充元件（這樣會比較好理解）。而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的Media Type，也是本篇前端工程師課程文章的講解重點)，再針對這些 Media Type 定義其樣式 (Media Features，中文譯作「媒體樣式」或是「媒體特徵」)。

Media Query 使用方法

如果要使用 Media Query ，則使用方式有下列三種：

1. 在 HTML5 中使用，以下範例為用 media 屬性判斷使用者的裝置大小：當螢幕小於 400 px 時，套用指定的 CSS 檔案「Screen.css」：

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="Screen.css">

2. 上面的功能，若不使用HTML5，而是在 CSS 中使用，則為：

＠media screen  and (max-device-width: 400px){...}

3. 你也可使用 @import

@import "screen.css" screen and (max-device-width: 400px)

看了以上 Media Query 的使用方法後，你會發現以上三種的範例中包含了「screen」、「and」和「max-device-width: 400px」。這三者分別為「媒體類型(media type)」、「判斷條件 (and/not/only)」和「媒體特徵 (media feature)」。媒體類型(media type)於此篇文章做說明、and/not/only 判斷條件於本篇文章做說明，而媒體特徵 (Media Feature) 的各式屬性也於此篇（頁面尺寸與顯示品質的屬性）與此篇（「顏色類」和「互動類」的屬性）列出。

本篇為「前端工程師的基礎RWD教學」系列文章第三篇，全系列文章如下:

  HERE！延伸閱讀看過來：

關於RWD,前端工程師必備的三點(上)基礎概念

關於RWD,前端工程師必備的三點(下)-流動布局

  Python課程讓你跟AI漫畫不脫節!現在連電影都加入陣營!

AI人工智慧撰寫科技恐被濫用,將因此有大量假新聞出現?!

哪個程式語言能像瑞士刀一樣百變實用?讓Python課程告訴你答案!

中國IT教育領導品牌　達內教育集團第一家海外授權中心

`: