HTML link media 屬性

2018-11-23 11:21 更新

HTML <link> media 屬性

HTML link 標簽參考手冊 HTML <link> 標簽

實例

針對兩種不同的媒介類型(計算機屏幕和打?。┑膬煞N不同的樣式表:

<head>
<link rel="stylesheet" type="text/css" href="demo_print.css" media="print">
</head>

嘗試一下 ?

瀏覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流瀏覽器都支持 media 屬性。


定義和用法

media 屬性規(guī)定被鏈接文檔將顯示在什么設備上。

該屬性通常與 CSS 樣式表一起使用,用于為不同的媒介類型規(guī)定不同的樣式。

media 屬性接受若干個值。


HTML 4.01 與 HTML5之間的差異

media 屬性現(xiàn)在支持更多的值。


語法

<link media="value">

可能的運算符

描述
and 規(guī)定一個 AND 運算符。
not 規(guī)定一個 NOT 運算符。
, 規(guī)定一個 OR 運算符。

設備

描述
all默認。適用于所有設備。
aural語音合成器。
braille盲文反饋裝置。
handheld手持設備(小屏幕、有限帶寬)。
projection投影儀。
print打印預覽模式/打印頁面。
screen計算機屏幕。
tty電傳打字機以及類似的使用等寬字符網格的媒介。
tv電視機類型設備(低分辨率、有限的滾屏能力)。

描述
width 規(guī)定目標顯示區(qū)域的寬度。
可使用 "min-" 和 "max-" 前綴。
例子:media="screen and (min-width:500px)"
height 規(guī)定目標顯示區(qū)域的高度。
可使用 "min-" 和 "max-" 前綴。
例子:media="screen and (max-height:700px)"
device-width 規(guī)定目標顯示器/紙張的寬度。
可使用 "min-" 和 "max-" 前綴。
例子:media="screen and (device-width:500px)"
device-height 規(guī)定目標顯示器/紙張的高度。
可使用 "min-" 和 "max-" 前綴。
例子:media="screen and (device-height:500px)"
orientation 規(guī)定目標顯示器/紙張的方向。
可能的值:"portrait" 或 "landscape"。
例子:media="all and (orientation: landscape)"
aspect-ratio 規(guī)定目標顯示區(qū)域的寬度/高度比。
可使用 "min-" 和 "max-" 前綴。
例子:media="screen and (aspect-ratio:16/9)"
device-aspect-ratio 規(guī)定目標顯示器/紙張的 device-width/device-height 比率。
可使用 "min-" 和 "max-" 前綴。
例子:media="screen and (aspect-ratio:16/9)"
color 規(guī)定目標顯示器的 bits/color。
可使用 "min-" 和 "max-" 前綴。
例子:media="screen and (color:3)"
color-index 規(guī)定目標顯示器可以處理的顏色數。
可使用 "min-" 和 "max-" 前綴。
例子:media="screen and (min-color-index:256)"
monochrome 規(guī)定單色幀緩沖中的 bits/pixel。
可使用 "min-" 和 "max-" 前綴。
例子:media="screen and (monochrome:2)"
resolution 規(guī)定目標顯示器/紙張的像素密度 (dpi 或 dpcm)。
可使用 "min-" 和 "max-" 前綴。
例子: media="print and (resolution:300dpi)"
scan 規(guī)定 tv 顯示器的掃描方式。
可能的值:"progressive" 和 "interlace"。
例子:media="tv and (scan:interlace)"
grid 規(guī)定輸出設備是否是網格或位圖。
可能的值:"1" 為網格,否則為 "0"。
例子:media="handheld and (grid:1)"


HTML link 標簽參考手冊 HTML <link> 標簽
以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號