HTML媒體查詢是一種用于設(shè)置屏幕響應(yīng)式布局的技術(shù)。通過媒體查詢，網(wǎng)站可以根據(jù)不同設(shè)備的屏幕大小和方向來加載對應(yīng)的樣式表，達(dá)到最佳的用戶體驗(yàn)。媒體查詢可以用于設(shè)置頁面寬度、高度、屏幕方向等參數(shù)。
下面是使用HTML媒體查詢設(shè)置屏幕代碼的示例：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 應(yīng)用于所有設(shè)備的樣式 */
body {
font-size: 16px;
}
/* 應(yīng)用于寬度小于等于768像素的設(shè)備 */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
/* 應(yīng)用于寬度小于等于576像素的設(shè)備 */
@media (max-width: 576px) {
body {
font-size: 12px;
}
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<p>這是一段文字。</p>
</body>
</html>在上例中，我們通過<meta>標(biāo)簽設(shè)置<viewport>，使頁面自適應(yīng)不同屏幕大小。然后，我們使用媒體查詢根據(jù)不同設(shè)備寬度來加載不同的樣式表。例如，在設(shè)備寬度小于等于768像素時(shí)，我們設(shè)置<body>的字體大小為14px。而在寬度小于等于576像素時(shí)，我們將字體大小設(shè)置為12px。
通過上述示例，我們可以很清晰地發(fā)現(xiàn)HTML媒體查詢的使用步驟。首先，我們需要設(shè)置<viewport>，以確保頁面自適應(yīng)不同的屏幕大小。然后，我們定義媒體查詢來根據(jù)不同設(shè)備的屏幕大小和方向來加載對應(yīng)的樣式表。