CSS @media 規則

上一頁
下一頁

CSS @media 規則允許針對特定裝置並向其應用 CSS 樣式。如果媒體查詢與使用內容的裝置匹配，則 CSS 程式碼塊將應用於文件。我們可以在 JavaScript 中使用 CSSMediaRule CSS 物件模型介面來訪問使用 @media 媒體查詢生成的 CSS 規則。

語法

@media [media-type] ([media-feature]) {
   /* CSS Styles */
}

媒體型別

媒體型別用於 CSS 媒體查詢，以根據裝置應用不同的樣式。最常見的媒體型別是 all、print 和 screen。如果您未指定媒體型別，則它將匹配所有裝置。但是，如果您使用 not 或 only 邏輯運算子，則必須指定媒體型別。

值 描述
all 預設值。此值適用於所有媒體型別。
print 此值僅在列印文件時有效。
screen 此值僅對螢幕有效，例如計算機、平板電腦和智慧手機。

要了解有關媒體型別的更多資訊並檢視示例，請檢視 媒體型別。

媒體特徵

媒體特徵根據特定特徵、輸出裝置或環境對網頁應用不同的樣式。每個媒體特徵表示式都需要在其周圍加上括號。

要了解有關媒體特徵的更多資訊並檢視示例，請檢視 媒體特徵。

邏輯運算子

媒體查詢可以使用邏輯運算子（如 not、and、only 和 or 以及逗號）組合。下表顯示了可在媒體查詢中使用的邏輯運算子

邏輯運算子 說明
and 它將多個媒體特徵組合到單個媒體查詢中，其中每個連線的特徵都必須為真，整個查詢才能為真。
or 這類似於逗號 , 運算子。這是在媒體查詢級別 4 中引入的。
not 它可用於反轉條件的邏輯。只有在所有媒體特徵都為假時，not 運算子才為真。
only 僅當整個媒體查詢匹配時才應用樣式。這有助於防止舊版瀏覽器應用樣式。
comma 它將兩個或多個媒體查詢組合到單個規則中。如果逗號分隔列表中的任何媒體查詢為真，則整個媒體語句也將為真。這類似於 or 邏輯運算子。

CSS @media 規則示例

以下示例顯示了 @media 規則的使用。

@media 規則與列印和螢幕

以下示例演示瞭如何使用媒體查詢對元素應用不同的樣式，當它在螢幕上顯示或以列印頁面模式顯示時。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      @media print {
         p {
            color: red;
         }
      }
      @media screen {
         p {
            color: blue;
         }
      }
      button {
         background-color: violet;
         padding: 5px;
      }
   </style>
</head>
<body>
   <h2>
      CSS @media Rule 
   </h2>
   <p>
      On the screen, the text will appear in blue.
   </p>
   <p>
      When you open the print preview, 
      the text will be displayed in red.
   </p>
   <p>
      Click on below button to see the 
      effect when you print the page.
   </p>

   <button onclick="printPage()">
      Print Page
   </button>

   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

@media 規則與 and 邏輯運算子

以下示例演示了當螢幕寬度在 600px 和 1000px 之間時，段落元素將具有藍色文字和黃色背景顏色。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      @media only screen and (min-width: 600px) and (max-width: 1100px)   {
         p {
            color: blue;
            background:  yellow
         }
      }
   </style>
</head>
<body>
   <h2>
      CSS @media Rule 
   </h2>
   <p>
      When you open page on a screen, the paragraph 
      elements will have blue text and a yellow 
      background color.
   </p>
</body>
</html>

@media 規則與逗號邏輯運算子

以下示例演示了 @media screen, print 媒體查詢將應用於螢幕和列印媒體型別，元素的文字顏色對於兩者都將為紅色。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      @media screen, print {
         p {
            color: red;
         }
      }
      button {
         background-color: violet;
         padding: 5px;
      }
   </style>
</head>
<body>
   <h2>
      CSS @media Rule
   </h2>
   <p>
      When you open a page on a screen or 
      printed page mode, the paragraph element 
      will have red text.
   </p>
   <p>
      Click on below button to see the 
      effect when you print the page.
   </p>

   <button onclick="printedPage()">
      Print Page
   </button>

   <script>
      function printedPage() {
         window.print();
      }
   </script>
</body>
</html>

@media 規則與範圍值

以下示例演示了當高度大於 300px 時，文字將為藍色，背景將為黃色。當寬度在 600px 和 1000px 之間時，文字將為紫色。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      @media (height < 300px) {
         h4 {
            background-color: yellow;
            color: blue;
         }
      }
      @media (600px <= width <= 1000px) {
         h5 {
            background-color: violet;
         }
      }
   </style>
</head>
</body>
   <h2>
      CSS @media Rule 
   </h2>
   <h3>
      Resize the browser window to see the effect.
   </h3>
   <h4>
      When the height is greater than 300px, 
      the text will be blue and background will 
      be yellow.
   </h4>
   <h5>
      When the width is between 600 and 
      1000px, the text will be violet.
   </h5>
</body>
</html>

@media 規則與響應式導航選單

以下示例演示了導航欄的佈局將水平顯示，背景為粉紅色。當螢幕尺寸小於 700px 時，導航欄將垂直顯示，背景為紅色。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      nav ul {
         list-style: none;
         padding: 0;
         margin: 0;
         background-color: pink;
         padding: 10px;  
      }
      nav li {
         display: inline;
         margin-right: 20px;
         color: blue;
      }
      nav a {
         text-decoration: none;
         text-align: center;
      }
      @media screen and (max-width: 700px) {
         nav ul {
            background-color: red;
         }
         nav li {
            display: block;
            margin: 10px 0;
         }
      }
   </style>
</head>
<body>
   <h2>
      CSS @media Rule 
   </h2>
   <h2>
      Resize the browser window to see the effect.
   </h2>
   <nav>
      <ul>
         <li><a href="#">
            Tutorialspoint
         </a></li>
         <li><a href="#">
            Home
         </a></li>
         <li><a href="#">
            Articles
         </a></li>
         <li><a href="#">
            About us
         </a></li>
      </ul>
   </nav>
</body>
</html>

@media 規則與響應式列布局

以下示例演示了響應式列布局。當螢幕寬度小於 992px 時，列布局將從四列更改為兩列，當螢幕寬度小於 500px 時，列布局將更改，它們將彼此堆疊。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .column-box {
         float: left;
         width: 25%;
         padding: 3px;
         box-sizing: border-box;
         background-color: pink;
         border: 2px solid blue;
      }
      @media screen and (max-width: 992px) {
         .column-box {
            width: 50%;
         }
      }
      @media screen and (max-width: 500px) {
         .column-box {
            width: 100%;
         }
      }
   </style>
</head>
<body>
   <h2>
      CSS @media Rule 
   </h2>
   <h2>
      Resize the browser window to see the effect.
   </h2>
   <div class="column-box">
      Box 1
   </div>
   <div class="column-box">
      Box 2
   </div>
   <div class="column-box">
      Box 3
   </div>
   <div class="column-box">
      Box 4
   </div>
</body>
</html>

@media 規則與方向

以下示例演示了 orientation: landscape 媒體特徵，當視口處於橫向方向時，body 元素將具有綠色背景、黃色文字，並且 h3 元素將具有粉紅色文字。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-color: violet;
      }
      @media  only screen and (orientation: landscape) {
         body {
            background-color: green;
            color: yellow;
         }
         h3 {
            color: pink;
         }
      }
   </style>
</head>
<body>
   <h2>
      CSS @media Rule 
   </h2>
   <h3>
      Resize the browser window to see the effect.
   </h3>
   <p>
      when the viewport is in landscape orientation, 
      the body element will have a green background, 
      yellow text, and the h3 element will have pink 
      text.
   </p>   
</body>
</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
@media 21 9 3.5 4.0 9
css_properties_reference.htm
列印頁面
上一頁
下一頁
廣告