前端工程師基本RWD教學(三)Media Query
前端工程師基本RWD教學(三)Media Query

前端工程師基本RWD教學(三)Media Query

前端工程師基本RWD教學(三)Media Query

想當前端工程師發大財的你,網頁設計必備的基礎技能必須要熟透透,本篇將著重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教學系列文章目錄

 

  1. 前端工程師的基礎RWD教學(一)RWD基礎概念
  2. 前端工程師的基礎RWD教學(二)流動布局Fluid Grid
  3. 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法
  4. 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型
  5. 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件
  6. 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上
  7. 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下
  8. 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image

 

 

參考連結:

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

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

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

入門前端工程師知識~得心應手不是夢-CSS的特性

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

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

達內教育開幕 培養台灣IT人才進入全球企業

最後修改日期: 2019-05-23