如何在 CSS 中更改特定較寬視口的背景顏色？

我們可以透過使用所謂的“視口”寬度來確定用於瀏覽的裝置。

在計算機圖形學中，視口通常指使用者當前正在檢視的多邊形（通常是矩形）區域。當我們在網頁瀏覽器中談論視口時，通常指的是內容可見的視窗，使用者無法在視窗外部檢視內容。

視口基本上有兩種型別。

  • 固定且瀏覽器在其上繪製整個網頁的視口稱為佈局視口。

  • 根據縮放或其他原因，佈局視口中當前可見的部分稱為視覺視口。

螢幕尺寸

它基本上是指裝置的物理寬度和高度。許多裝置的螢幕尺寸各不相同；根據螢幕尺寸，使用者與網頁互動的方式也會發生變化。那麼，螢幕尺寸與視口寬度之間有什麼關係呢？

  • 無論使用什麼裝置，使用者都更習慣於垂直滾動，這就是我們使用視口寬度對裝置進行分類的原因，因為佈局視口可以具有的最大寬度受裝置物理寬度的限制。

  • 至此，我們知道了“視口”是什麼，以及它們與螢幕尺寸的關係。如果我們想要一個響應式網頁，在特定寬度後更改樣式，則必須使用元視口標籤設定視口。

  • 此標籤告訴瀏覽器如何控制頁面的大小和縮放。元視口值width=device-width指示頁面將其寬度以裝置無關畫素調整為與螢幕寬度匹配。

透過新增值initial-scale=1，頁面可以利用整個橫向寬度，這指示瀏覽器在忽略裝置方向的情況下，在CSS畫素和裝置無關畫素之間建立1:1的關係。

示例

下面給出了使用 device-width 和初始比例 1 設定視口的示例。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of Viewport</title>
</head>
<body>
   <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque earum in  iste non animi itaque debitis sint! Repellat vero aliquid ullam. Aliquid  voluptates recusandae praesentium numquam reiciendis, ullam aliquam  nostrum!  </p>
</body>
</html>

媒體查詢和媒體規則

眾所周知，我們可以使用視口寬度來觸發樣式更改，現在我們將討論 CSS 中的媒體查詢。您可以使用媒體查詢根據裝置的整體型別（例如列印與螢幕）或其他詳細資訊（例如螢幕解析度或瀏覽器視口寬度）應用 CSS 樣式。我們使用媒體查詢用於以下方面：

  • 有條件地應用樣式。

  • 當我們需要定位任何特定型別的媒體時

  • 或者當我們想要測試或監控媒體狀態時

要使用媒體查詢，我們必須指定我們所定位的媒體型別以及我們所針對的特性。我們還可以使用邏輯運算子來建立更復雜的媒體查詢。我們還可以使用 not 來反轉媒體查詢的含義，這在某些情況下非常方便。讓我們來看一個媒體查詢的例子。

@media print {
   color: black;
   font-size: larger;
}

上面的媒體查詢將僅應用於列印型別的媒體，並將顏色更改為黑色並增加字型大小。

下面給出了一個複雜媒體查詢的示例。

@media (min-width: 30em) and (orientation: landscape) 
   {Color: black;
      Font-size: larger;
   }

上面的查詢應用相同的樣式，但應用於大小至少為 30em 且處於橫向方向的媒體。

媒體規則：

我們指定媒體型別和媒體特性的部分通常被稱為媒體規則。

可以在媒體規則中使用的各種邏輯運算子如下所示：

  • 非 (Not)

  • 與 (And)

  • 或 (Or)

示例

下面給出了一個使用媒體查詢解決當前問題的示例程式碼。

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <style>
      body {
         background-color: rgb(223, 241, 223);
         font-size: 20px;
      }
      @media only screen and (max-width: 750px) {
         body {
            background-color: aliceblue;
         }
      }
   </style>
</head>
<body>
   <h1>Example of media query to change background color</h1>
   <p>Please resize the browser window to see a change in background color. </p>
</body>
</html>

結論

總而言之，透過在 CSS 中使用媒體查詢，您可以更改特定較寬視口的背景顏色。您只需指定視口的寬度，並在程式碼中使用它為特定視口大小設定不同的背景顏色即可。這將使您可以為每種裝置型別和螢幕尺寸建立最佳化的網站設計，這對於提供良好的使用者體驗至關重要。

更新於：2023年2月27日

1000+ 次檢視

啟動您的職業生涯

完成課程後獲得認證

開始
廣告