我們可以通過使用我們所稱之為“視口”寬度來確定正在使用的設備。
在計算機圖形學中，視口通常指的是用戶當前正在查看的多邊形（通常是矩形）區(qū)域。當我們在Web瀏覽器中談論視口時，通常指的是一個窗口，在該窗口中內容可見，用戶無法查看窗口外的內容。
基本上有兩種類型的視口。
瀏覽器在其上繪制整個網(wǎng)頁的固定視口稱為布局視口。
根據(jù)縮放或任何其他原因當前可見的布局視口部分稱為視覺視口。
屏幕尺寸
它基本上指的是設備的物理寬度和高度。有許多具有不同屏幕尺寸的設備；根據(jù)屏幕尺寸，用戶與網(wǎng)頁的交互方式也會發(fā)生變化。因此，屏幕尺寸與視口寬度之間有什么關系。
無論使用哪種設備，用戶都更習慣于垂直滾動，這就是為什么我們使用視口的寬度來對設備進行分類，因為布局視口可以擁有的最大寬度受設備物理約束。寬度。
在這一點上，我們知道什么是“視口”，以及它們與屏幕尺寸的關系。如果我們想要一個響應式的網(wǎng)頁，在特定寬度后更改樣式，我們必須使用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>
登錄后復制
媒體查詢和媒體規(guī)則
我們知道可以使用視口寬度來觸發(fā)樣式更改，現(xiàn)在我們將討論CSS中的媒體查詢。您可以使用媒體查詢根據(jù)設備的整體類型（例如打印與屏幕）或其他詳細信息（如屏幕分辨率或瀏覽器視口寬度）應用CSS樣式。我們使用媒體查詢來完成以下任務 ?
有條件地應用樣式。
當我們需要針對任何特定形式的媒體
或者當我們想要測試或必須監(jiān)控媒體狀態(tài)時
要使用媒體查詢，我們必須指定我們的目標媒體類型和我們的目標功能。我們還可以利用邏輯運算符來創(chuàng)建非常復雜的媒體查詢。我們還可以使用 not 來反轉媒體查詢的含義，這在某些情況下非常方便。讓我們看一個媒體查詢的示例。
@media print {
color: black;
font-size: larger;
}
登錄后復制
上述媒體查詢將僅應用于打印類型的媒體，并將顏色更改為黑色并增加字體大小。
下面給出了復雜媒體查詢的示例。
@media (min-width: 30em) and (orientation: landscape)
{Color: black;
Font-size: larger;
}
登錄后復制
上述查詢適用于至少30em大小且為橫向方向的媒體。
媒體規(guī)則 ?
我們指定媒體類型和媒體特征的部分通常稱為媒體規(guī)則。
下面列出了媒體規(guī)則中可以使用的各種邏輯運算符 –
不是
還有
或者
示例
下面給出了使用媒體查詢解決當前問題的示例代碼。
<!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 中的媒體查詢，您可以更改特定更寬視口上的背景顏色。您只需指定視口的寬度并在代碼中使用它來為特定視口大小設置不同的背景顏色。這將使您能夠為每種設備類型和屏幕尺寸創(chuàng)建優(yōu)化的網(wǎng)站設計，這對于提供出色的用戶體驗至關重要。
以上就是如何更改 CSS 中特定更寬視口的背景顏色？的詳細內容，更多請關注www.92cms.cn其它相關文章！
