當螢幕寬度大於等於 768px 時,連結<a>
的文字顏色會變成紅色。
沒有寫 Media Type
的話,預設都是 all
:
以上的原始碼,如果加上 Media Type 的會,等同於以下:
例:
當螢幕寬度小於等於 767.98px 時,連結<a>
的文字顏色會變成綠色。
例:
當螢幕寬度大於等於 768px 且小於等於 991.98px 時,連結<a>
的文字顏色會變成橘色。
例:
當是螢幕時,螢幕寬度大於等於 768px 且小於等於 991.98px 時,連結<a>
的文字顏色會變成紅色。
例:
以半型逗號做分隔。
orientation 可以設定當手持裝置是橫向或縱向時,需要套用的 CSS,可以設定的值有:
portrait (縱向)
landscape (橫向)
註:即使是桌面裝置,若高度 > 寬度時,會視為直向;寬度 > 高度時,視為橫向。
當是螢幕時,且設備為橫向(landscape)擺放時,連結 <a>
的文字顏色會是紅色;反之,若設備為直向(portrait)擺放時,會是藍色。
all:所有類型都包含。
screen:針對螢幕裝置。
print:用於列印時。
使用 print 這 media type 來指定列印時,要套用的 CSS:
一般來說,沒有特別指定的話,Media Type 預設都是 all,也就是不管任何情況,都會套用。
如果要指定 Media Type 的話,可按照以下方式來指定:
在 HTML 中:(主要是加上 media
屬性)
如果要指定複數個媒體類型(Media Type),以半形逗號做區隔即可:
在 CSS 中:(設定 @import
或 @media
語法都可)
如果是複數個 Media Type: