前端工程師課程再進化-Media Query的媒體特性(上篇)
今天前端工程師課程,要更深入探討Media Query!首先,用表格帶你認識視窗.頁面尺寸和顯示品質的特性!
| 【前文提要】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 之外的設備 ) 大小 |
| 印表機裝置 (包含使用列印預覽所產生的畫面，如列印為 pdf) | |
| projection | 投影機裝置 |
| speech | 朗讀裝置 (針對可「讀出」網頁的設備) |
本篇為「前端工程師的基礎RWD教學」系列文章第四篇，全系列文章如下:
🌌延伸閱讀看這裡：
靠這三技能,前端工程師向"不專業"說再見~(1)RWD基礎觀念
靠這三技能,前端工程師向"不專業"說再見~(2)流動布局
前端工程師課程再進化-Media Query的媒體特性(下篇)
還在擔心跟不上AI時代的腳步?!上了Python課程讓你與眾不同!
人類史上最受歡迎的程式語言Python課程,你有興趣嗎?
Python課程讓你不用穿白袍也能懸壺濟世
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
