我是 HTML 新手，在研究一些 HTML 標簽時，我經常看到標簽media以外的一些元素支持屬性link。我知道在<link>標簽中您可以使用media屬性將 html 檔案鏈接到 2 個不同的外部 css 檔案，這些檔案具有特定于螢屏尺寸的格式。
但我不明白標簽或標簽media內屬性的使用。這兩個標簽中標簽的用例是什么。<a><source>media
當我運行帶有或不帶有屬性的以下代碼（來自 w3school 網站）時media，我看不出有任何區別。
<!-- examples from w3 school -->
<a href="att_a_media.asp?output=print"
media="print and (resolution:300dpi)">
Open media attribute page for print.</a>
<!-- or -->
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
這兩個標簽的media屬性是否重要，我可以安全地忽略它們嗎？
uj5u.com熱心網友回復：
media是<a>、<area>、<link>和標簽<source>的可用屬性之一。<style>
MDN 描述media：
此屬性指定鏈接資源適用的媒體。它的值必須是媒體型別/媒體查詢。此屬性主要在鏈接到外部樣式表時很有用——它允許用戶代理為其運行的設備選擇最適合的樣式表。
在 HTML 中，媒體查詢可以應用于各種元素：
- 在
<link>元素的media屬性中，它們定義了應該應用鏈接資源（通常是 CSS）的媒體。- 在
<source>元素的media屬性中，它們定義了應該應用該源的媒體。（這僅在
<picture>元素內部有效。）- 在
<style>元素的media屬性中，它們定義了應該應用樣式的媒體。
來自 MDN 的示例：
<!-- link tag -->
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
<!-- picture tag -->
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 800px)">
<source srcset="mdn-logo-medium.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN Web Docs">
</picture>
MDN注釋：
在 HTML 4 中，這只能是一個簡單的以空格分隔的媒體描述文字串列，即媒體型別和組，其中定義并允許作為此屬性的值，例如 print、screen、aural、braille。HTML5 將此擴展到任何型別的媒體查詢，它們是 HTML 4 允許值的超集。
不支持CSS3 媒體查詢的瀏覽器不一定能識別出適當的鏈接；不要忘記設定后備鏈接，即 HTML 4 中定義的受限媒體查詢集。
uj5u.com熱心網友回復：
它指定目標顯示幕/紙張的像素密度 (dpi)。可以使用“min-”和“max-”前綴。如果您嘗試列印網頁，您可以看到結果。
<a href="att_a_media.asp?output=print"
media="print and (resolution:300dpi)">
Open media attribute page for print.</a>
<source>是元素的子元素，該<picture>元素最常見的用途<picture>是用于回應式設計中的藝術指導。可以設計多個影像來填充瀏覽器視口，而不是根據視口寬度放大或縮小一張影像。
例子：
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
uj5u.com熱心網友回復：
它指定鏈接檔案針對什么媒體或設備進行優化。此屬性用于指定目標 URL 是為特殊設備（如 iPhone）、語音或印刷媒體設計的。僅在存在 href 屬性時使用。是的，如果不需要，您可以忽略媒體屬性
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/453199.html
上一篇：無法連接到亞馬遜rds