HTML - media 屬性

HTML 的 **media** 屬性用於指定連結資源的設計目標媒體的提示。

透過使用 media 屬性，您可以對不同的裝置、螢幕尺寸或條件應用不同的樣式。其值為媒體查詢，如果缺少 media 屬性，則預設為所有。

如果其父元素為 **<picture>** 元素，則 **<source>** 允許使用 media 屬性，但如果其父元素為 **<audio>** 或 **<video>** 元素，則不允許使用。

語法

<tag media = "value"></tag>

media 屬性的值可以是。

media = "all"（適用於所有裝置）
media = "screen"（主要用於螢幕）
media = "speech"（用於螢幕閱讀器）
media = "print"（用於列印預覽模式或列印文件）

如果要為連結資源提及多個提示，可以使用布林運算子，關鍵字“and”指定 AND 運算子，關鍵字，（逗號）指定 OR 運算子，關鍵字“not”指定 NOT 運算子。

應用於

以下列出的元素允許使用 HTML media 屬性

元素	描述
<a>	HTML <a> 標籤用於在文件中附加超連結。
<area>	HTML <area> 標籤指定影像的區域，對映可以被點選或是有超連結連結到的活動區域。
<link>	HTML <link> 標籤指定當前文件與外部資源之間的關係。
<source>	HTML <source> 表示標籤中既沒有結束標籤也沒有任何內容。
<style>	HTML <style> 標籤用於在 HTML 檔案中引入 CSS 樣式。

HTML media 屬性示例

以下示例將說明 HTML media 屬性，在哪裡以及如何使用此屬性！

定義 media 屬性

在此示例中，我們使用 'link' 元素的 media 屬性來為不同的螢幕尺寸應用不同的 CSS 樣式表。對於螢幕寬度不超過 599 px，使用樣式表 'mobile.css'，對於螢幕寬度 600 px 及以上，使用 'style.css'。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>
      Media Attribute Example
   </title>
   <link rel="stylesheet" 
         href="style.css" 
         media="screen and (min-width: 600px)">
   <link rel="stylesheet" 
         href="mobile.css" 
         media="screen and (max-width: 599px)">
</head>
<body>
      <h1>Hello, World!</h1>
      <p>
         This is an example of using 
         the media attribute.
      </p>
</body>
</html>

基於螢幕尺寸的特定樣式

在此示例中，我們在 style 標籤中使用了 media 屬性。在輸出中，對於寬度至少為 600 畫素的螢幕，body 的背景顏色將為淺藍色；對於寬度小於 600 畫素的螢幕，body 的背景顏色將為淺珊瑚色。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>
      Media Attribute Example
   </title>

   <style media="screen and (min-width: 600px)">
      body {
         background-color: lightblue;
      }
   </style>
   <style media="screen and (max-width: 599px)">
      body {
         background-color: lightcoral;
      }
   </style>
</head>

<body>
      <h1>Hello, World!</h1>
      <p>
         This is an example of using the media 
         attribute with style elements.
      </p>
</body>

</html>

帶有 media 屬性的連結

在此示例中，media 屬性與錨點標籤一起使用，以根據媒體條件有條件地載入資源的備用版本。這裡我們使用錨點標籤的 media 屬性來載入同一頁面的可列印版本和移動友好版本。

<!DOCTYPE html>
<html lang="en">

<head>
      <title>
         Media Attribute with Anchor Tag 
      </title>
</head>

<body>
   <h1>Hello, World!</h1>
   <p>
      This is an example of using the media 
      attribute with an anchor tag.
   </p>

   <a href="/html/index.htm" 
      media="print">
         Printable Version
   </a>
   <br>
   <a href="/html/index.htm" 
      media="screen and (max-width: 599px)">
         Mobile Version
   </a>
</body>

</html>

帶有可點選區域的 media 屬性

這裡我們在影像地圖中的區域標籤中使用了 media 屬性，以針對不同的媒體型別或條件提供備用資源。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>
      Media Attribute with Area Tag
   </title>
</head>

<body>
   <h1>Image Map Example</h1>
   <p>
      Hover over the regions of the image to see 
      different links based on media conditions.
   </p>

   <img src="/html/images/media-attribute.jpg" 
        usemap="#example-map" 
        alt="Example Image Map">
   
   <map name="example-map">
      <!-- Link for general screens -->
      <area shape="rect" 
            coords="0,0,182,272" 
            href="/html/index.htm" 
            alt="Default Link">
      
      <!-- Link for print media -->
      <area shape="rect" 
            coords="180,0,373,141" 
            href="/html/index.htm" 
            alt="Print Link" 
            media="print">
      
      <!-- Link for small screens -->
      <area shape="rect" 
            coords="180,145,372,270" 
            href="/html/index.htm" 
            alt="Mobile Link" 
            media="screen and (max-width: 599px)">
   </map>
</body>

</html>

帶有 Source 標籤的 media 屬性

在此示例中，我們使用 source 標籤的 media 屬性來根據螢幕寬度更改影像。它不再支援 source 元素。

<!DOCTYPE html>
<html lang="en">
      
<head>
   <title>
      Media Attribute with Picture Element
   </title>
</head>

<body>
   <h1>Responsive Image Example</h1>
   <p>
      The image changes based on the screen width.
   </p>
   
   <picture>
      <!-- 
      Image for screens that are at least 800 pixels wide 
      -->
      <source srcset="/html/images/html.jpg" 
              media="(min-width: 600px)">

      <!-- 
      Image for screens that are less than 800 pixels wide 
      -->
      <source srcset="/css/images/css.jpg" 
              media="(max-width: 599px)">

      <!--
      Image for browsers that do not support the <picture> element 
      -->
      <img src="/html/images/html.jpg" 
              alt="Example Image">
   </picture>
</body>

</html>

支援的瀏覽器

屬性
media	是	是	是	是	是

html_attributes_reference.htm

列印頁面

上一個

下一個