前端工程師學習Media Query的路上有我罩之媒體類型

前端工程師學習Media Query的路上有我罩之媒體類型

前端工程師學習Media Query的路上有我罩之媒體類型

 

指定媒體類型是前端工程師在運用Media Query時,要先接觸的動作,這篇就用一個表格讓你了解有哪幾種類型!

 
 

 

【前文提要】網頁設計裡,何謂 Media Query 與 Media Feature?

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

參考文章:如何在RWD網頁中套用Media Query語法

Media Query 的語法包含了三個部分:媒體類型 (Media Type)、and/not/only 判斷條件與媒體特徵 (Media Features)。and/not/only 判斷條件本篇文章做說明,而媒體特徵 (Media Feature) 的各式屬性也於此篇(頁面尺寸與顯示品質的屬性)此篇(「顏色類」和「互動類」的屬性)列出。本篇就針對媒體類型 (Media Type) 說明如下:

 

 

這篇就直接開門見山了!

請看下方表格,是前端工程師在運用 Media Query 時,首先要指定媒體類型 (media type) 種類,是不是很多種?

媒體類型(media type) 簡介
all 所有裝置
screen 螢幕裝置 ( 除了 print 和 speech 之外的設備 ) 大小
print 印表機裝置 (包含使用列印預覽所產生的畫面,如列印為 pdf)
projection 投影機裝置
speech 朗讀裝置 (針對可「讀出」網頁的設備)

 

本篇為「前端工程師的基礎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是啥?前端工程師用三面相讓你秒懂(三)媒體查詢

前端工程師學習Media Query的路上有我罩之插入字條件

前端工程師學習Media Query的路上有我罩之流動圖片

不知道該學什麼程式語言才好?看完這篇就懂為何該選Python課程!!

PTT創辦人杜奕瑾成功打造人工智慧語音辨識 APP:雅婷逐字稿

掰掰悲催人生-達內教育先就業再付學費

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

本篇發表於 前端工程師教學 並標籤為 , , , , , , , , , 。將永久鏈結加入書籤。

發佈留言

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

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