如何更改 CSS 中特定更寬視窗的背景顏色？
- WBOY轉載
- 2023-09-07 22:13:101366瀏覽
我們可以透過使用我們稱之為「視口」寬度來確定正在使用的裝置。
在電腦圖形學中，視口通常指的是使用者目前正在查看的多邊形（通常是矩形）區域。當我們在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>
結論
總而言之，透過使用 CSS 中的媒體查詢，您可以變更特定更寬視窗上的背景顏色。您只需指定視窗的寬度並在程式碼中使用它來為特定視窗大小設定不同的背景顏色。這將使您能夠為每種設備類型和螢幕尺寸創建優化的網站設計，這對於提供出色的用戶體驗至關重要。
以上是如何更改 CSS 中特定更寬視窗的背景顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！