HTML 的media 属性用于指定浏览器,链接文档针对哪些设备进行优化。此属性通常与 CSS 样式表一起使用,但也可用于简单的 HTML 构建的网页。该属性允许用户从多种设备中进行选择,并且可以接受多个值。此属性用于指定目标 URL 是为特殊设备(如 iPhone、Android 等)、语音或印刷媒体、投影仪、电视等设计的。
注意:只有当 href属性用作href指定链接文档时才能使用此属性,因此媒体属性用于指定链接文档将如何出现以及在哪些设备中出现并兼容。
我们可以指定的各种设备值如下:
Sl.No. | VALUES | DESCRIPTION |
1. | all |
It is Default, if not specified. It is most suited for all media type devices. Syntax- Click here |
2. | screen |
It is used for the computer screens, smart-phones etc. Syntax- Click here |
3. | speech |
It is used for the screen-readers that do “reads” the page out loud. Syntax- Click here |
4. |
It is used for the Print preview mode/printed page’s mode. Syntax- Click here |
|
5. | tv |
It is used for Television type devices (low resolution, or the one with limited scroll ability). Syntax- Click here |
我们还可以在指定媒体设备类型的同时添加更多额外的特定信息,以显示链接文档将如何优化。
Sl.No. | VALUE | DESCRIPTION |
1. | width |
It is used to specify the width of the targeted media display area. Syntax- Click here |
2. | height |
It is used to specify the height of the targeted media display area. Syntax- Click here |
3. | device-width |
It is used to specify the width of the targeted media display area. . Syntax- Click here |
4. | aspect-ratio |
It is used to specify the width/height ratio of the targeted media display area. Syntax- Click here |
5. | device-height |
It is used to specify the height of the target media display/paper. Syntax- Click here |
6. | orientation |
It is used to specify the orientation of the media device display/paper. Syntax- Click here |
7. | device-aspect-ratio |
It is used to specify the device-width/device-height ratio of the media device display/paper. Syntax- Click here |
8. | color |
It is used to specify the bits per color of media device display. Syntax- Click here |
9. | color-index |
It is used to specify the number of colors that media device display can support. Syntax- Click here |
10. | resolution |
It is used to specify the pixel density of the media device display/paper. Syntax- Click here |
句法:
下面是说明如何指定媒体属性的代码。
例子:
HTML
Welcome To GFG
Click here
the code here in HTML sepcifies that the
link attached is valid for "ALL" media
devices and with aspect-ratio=16:9