初階前端工程師常識集(八)-媒體類型知多少?

 

身為前端工程師的你,如果還不知道什麼是媒體類型的話,可是會被笑的哦~
【前文提要】RWD 網頁設計必備語法：Media Query
前端工程師在製作 RWD 響應式網頁時，一定會用到的 CSS 語法就是 Media Query。簡單來說，我們可以把 Media 視為 CSS 的擴充元件（這樣會比較好理解）。而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的 Media Type)，再針對這些類型 (Media Type) 定義其樣式 (Media Features，中文譯作「媒體樣式」或是「媒體特徵」)。
參考文章：如何在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教學系列文章目錄 前端工程師的基礎RWD教學(一)RWD基礎概念 前端工程師的基礎RWD教學(二)流動布局Fluid Grid 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image

      更多閱讀:
初階前端工程師常識集(一)-何謂RWD響應式網站?
想要成為前端工程師可不簡單,快來check自己會了幾項?
如何利用CSS來設定背景位置?資深前端工程師教你小撇步!
中國IT教育領導品牌　達內教育集團第一家海外授權中心
厭世代正風行?來上Java課程可以幫你扭轉困境!
上了Python課程,再思考如何能向十大世界人工智慧研發先驅看齊
重視AI人工智慧.物聯網.大數據.VR/AR,就不用怕失業!