CSS語法

前端工程師的RWD小教室(三)Media Query的使用方法

2019-05-02

前端工程師網頁設計不可不知的語法”Media Query”

前端工程師網頁設計不可不知的語法"Media Query"
前端工程師網頁設計不可不知的語法”Media Query”

 

前端工程師在製作 RWD 響應式網頁時,一定會用到的 CSS 語法就是 Media Query。簡單來說,我們可以把 Media 視為HTML5 和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小教室(二)流動布局FLUID GRID

 

前端工程師的RWD小教室(四)Media Type媒體類型

 

HTML5教學告訴你怎麼做出生動的書本翻頁動畫!!

 

Python課程的老師帶你分析谷歌跟蜻蜓計畫的愛恨情仇!

 

網友看完這個網路行銷課程都給跪了

 

Python課程學生的福音!Python可在Window下載囉

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料