重金屬AI工程師的Coding分享

關於前端工程師必備技能有許多,今天要告訴大家有關RWD的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. 上面的功能，若使用 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教學」系列文章第三篇，全系列文章如下:

參考連結:

前端工程師基礎RWD教學(一)RWD基礎概念

前端工程師基礎RWD教學(二)流動布局Fluid Grid

前端工程師基礎RWD教學(四)流動圖片Fluid Image

入門前端工程師知識~得心應手不是夢-透析ID選擇器

前端工程師教你,這標籤如何應用在CSS裡(上)Div標籤

前端工程師教你,這標籤如何應用在CSS裡(下)Span標籤

NOWnews 今日新聞