媒体屏幕元标记 - HTML

简介

媒体屏幕元标记是HTML5中引入的一个元素，用于指定一个或多个媒体查询，当这些查询匹配时，可以为该元素应用不同的CSS样式。这使得网页设计师可以通过一个HTML元素来控制不同屏幕宽度下的网站布局。

语法

<link rel="stylesheet" media="media-query-list" href="styles.css">

解释

• <link> 标签被用来连接样式表到 HTML 文档。
• rel="stylesheet" 属性定义了被连接文档的类型为样式表。
• media 属性定义了一个或多个媒体查询，每个查询被用来验证当前环境下的设备是否匹配，如果匹配则会被应用。媒体查询可以是针对屏幕、打印机等等。
• href 属性定义了被链接样式表的位置。

示例

<link rel="stylesheet" media="screen and (min-width: 768px)" href="styles.css">

解释

以上示例指定了一个媒体查询，它的条件为最小宽度为768px的屏幕，并将链接一个名为styles.css的样式表。这将确保该样式表只会在满足条件的情况下被应用，可以让开发者通过不同的样式表文件来配置不同屏幕宽度下的网站布局。

附注

• media 属性可以使用多个媒体条件和逻辑运算符来组合使用。
• 常用的条件包括 screen，print，all，min-width 和 max-width。

参考资料

• MDN Web Docs