如何更改 CSS 中特定更寬視窗的背景顏色？-css教學-PHP中文網

螢幕尺寸

範例

媒體查詢與媒體規則

結論

首頁

web前端

css教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 07, 2023 pm 10:13 PM

如何更改 CSS 中特定更宽视口的背景颜色？

我們可以透過使用我們稱之為「視口」寬度來確定正在使用的裝置。

在電腦圖形學中，視口通常指的是使用者目前正在查看的多邊形（通常是矩形）區域。當我們在Web瀏覽器中談論視口時，通常指的是一個窗口，在該窗口中內容可見，用戶無法查看窗口外的內容。

基本上有兩種類型的視窗。

瀏覽器在其上繪製整個網頁的固定視窗稱為佈局視窗。
根據縮放或任何其他原因目前可見的佈局視窗部分稱為視覺視窗。

螢幕尺寸

它基本上指的是設備的物理寬度和高度。有許多具有不同螢幕尺寸的設備；根據螢幕尺寸，使用者與網頁互動的方式也會改變。因此，螢幕尺寸與視窗寬度之間有什麼關係。

無論使用哪種設備，使用者都更習慣於垂直滾動，這就是為什麼我們使用視窗的寬度來對設備進行分類，因為佈局視口可以擁有的最大寬度受設備物理約束。寬度。
在這一點上，我們知道什麼是“視窗”，以及它們與螢幕尺寸的關係。如果我們想要一個響應式的網頁，在特定寬度後更改樣式，我們必須使用meta視窗標籤設定視口。
此標記告訴瀏覽器如何控制頁面的大小和縮放。元視口值 width=device-width 通知頁面調整其寬度（以裝置無關像素為單位）以符合螢幕寬度。

頁面可以透過加入值initial-scale=1來利用整個橫向寬度，這表示瀏覽器在CSS像素和裝置獨立像素之間建立1:1的關係，而不管裝置方向如何。

範例

以下是使用裝置寬度和初始縮放比例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大小且為橫向方向的媒體。

媒體規則 −

#我們指定媒體類型和媒體特徵的部分通常稱為媒體規則。

下面列出了媒體規則中可以使用的各種邏輯運算符 -

不是
還有
或

範例

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

<!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>

登入後複製