頂尖前端工程師必備技能之二-Media Queries使用技巧

頂尖前端工程師必備技能之二-Media Queries使用技巧

頂尖前端工程師必備技能之二-Media Queries使用技巧
頂尖前端工程師必備技能之二-Media Queries使用技巧

Media Queries是前端工程師愛用的語法之一,善用它你會發現超好用!

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

 

 

 

推薦文章:
頂尖前端工程師必備技能之三-流動布局(Fluid Grid)設計


SEO無痛該怎麼做?資深前端工程師教你對的方法!


想當頂尖前端工程師?以下必備技能可不能少!


達內課程先就業再付款- 中時電子報


還在為成為專業IT人煩惱?!選對Java課程讓你輕鬆到位!


聯發科推出超狂AI智慧晶片!! 現在就是學習Python課程最佳時機!!


人人有功練!AI人工智慧相關課程將編入新課綱

發佈留言

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