Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

HTML <link> media 属性

❮ HTML <link> 标签

示例

两种不同媒体类型(屏幕和打印)的两种不同样式表

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
  <link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
自己尝试 »

定义和用法

The media 属性指定目标资源针对的媒体/设备。

此属性主要与 CSS 样式表一起使用,以指定针对不同媒体类型的不同样式。

The media 属性可以接受多个值。


浏览器支持

属性
media

语法

<link media="value">

可能的运算符

描述
and 指定 AND 运算符
not 指定 NOT 运算符
, or

指定 OR 运算符

描述
设备 all
默认。用于所有媒体类型设备 print
用于打印预览模式/打印页面 screen
用于电脑屏幕、平板电脑、智能手机等。 speech
用于大声“朗读”页面的屏幕阅读器 aural
已弃用。 语音合成器 braille
已弃用。 盲文反馈设备 handheld
已弃用。 手持设备(小屏幕,带宽有限) projection
已弃用。 投影仪 tty
已弃用。 电传打字机和类似的媒体使用固定间距字符网格 tv

已弃用。 电视类型设备(低分辨率,滚动能力有限)

描述
aspect-ratio
指定目标显示区域的宽高比。
可以使用“min-”和“max-”前缀。
示例:media="screen and (max-aspect-ratio:16/9)" color
指定目标显示区域的宽高比。
指定目标显示器的每种颜色的位数。
示例:media="screen and (min-color:3)" color-index
指定目标显示区域的宽高比。
指定目标显示器可以处理的颜色数。
示例:media="screen and (min-color-index:256)" device-aspect-ratio
已弃用。 指定目标显示器/纸张的设备宽度/设备高度比。 device-width
已弃用。 指定目标显示器/纸张的宽度。 device-height
已弃用。 指定目标显示器/纸张的高度。 grid
指定输出设备是网格还是位图。
可能的值为网格的“1”和“0”
示例:media="handheld and (grid:1)" height
指定目标显示区域的宽高比。
指定目标显示区域的高度。
示例:media="screen and (max-height:700px)" monochrome
指定目标显示区域的宽高比。
指定单色帧缓冲区中的每像素位数。
示例:media="screen and (min-monochrome:2)" orientation
指定目标显示器/纸张的方向。
可能的值:“portrait”或“landscape”
示例:media="all and (orientation: landscape)" resolution
指定目标显示区域的宽高比。
指定目标显示器/纸张的像素密度(dpi 或 dpcm)。
示例:media="print and (min-resolution:300dpi)" scan
指定电视显示器的扫描方法。
可能的值为“progressive”和“interlace”。
示例:media="tv and (scan:interlace)" width
指定目标显示区域的宽高比。
指定目标显示区域的宽度。

❮ HTML <link> 标签
×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.