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