隨著移動(dòng)設(shè)備的普及，我們的網(wǎng)站或應(yīng)用程序要適應(yīng)不同大小的屏幕。為了提供更好的用戶體驗(yàn)，我們需要根據(jù)設(shè)備的橫豎屏幕來調(diào)整CSS樣式。

在使用CSS媒體查詢時(shí)，我們需要使用@media規(guī)則。使用@media規(guī)則可以在不同分辨率下應(yīng)用不同的CSS代碼。

@media screen and (orientation: portrait) {
/* 在豎屏下的CSS樣式 */
}
@media screen and (orientation: landscape) {
/* 在橫屏下的CSS樣式 */
}

在上述代碼中，我們使用了orientation屬性，它可以接受兩個(gè)值：portrait和landscape。portrait表示豎屏，而landscape表示橫屏。

如果我們想要在不同屏幕尺寸下應(yīng)用不同的CSS樣式，我們可以使用min-width和max-width屬性。比如我們想要在寬度小于480px的設(shè)備上應(yīng)用不同的CSS樣式，代碼如下：

@media screen and (max-width: 480px) {
/* 在寬度小于480px的設(shè)備下的CSS樣式 */
}

需要注意的是，我們需要按照從小到大的順序編寫媒體查詢，以便正確應(yīng)用CSS樣式。

除了使用@media規(guī)則，我們還可以使用JavaScript來檢測(cè)屏幕方向并動(dòng)態(tài)調(diào)整CSS樣式。下面是使用JavaScript的示例代碼：

if (window.matchMedia("(orientation: portrait)").matches) {
/* 在豎屏下的CSS樣式 */
} else {
/* 在橫屏下的CSS樣式 */
}

需要注意的是，使用JavaScript動(dòng)態(tài)調(diào)整CSS樣式可能會(huì)增加頁面的加載時(shí)間，需要謹(jǐn)慎使用。