Media Query是前端工程師無法避免的CSS語法,我今天就整理出四篇關於它的分類讓你更好上手!
【前文提要】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教學」系列文章第四篇,全系列文章如下:
延伸閱讀看這裡:
認識前端工程師必備技能-Media Query之媒體特性(下)
人工智慧進化!大量產出可信度極高的假新聞與文章,你能辨真假嗎?
人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?
留言列表