CSS是網(wǎng)頁(yè)設(shè)計(jì)中不可缺少的一部分，可以用來(lái)控制和優(yōu)化網(wǎng)頁(yè)各種元素的樣式和排版。有時(shí)候，我們需要禁止橫屏顯示，以避免對(duì)用戶體驗(yàn)產(chǎn)生不利影響。接下來(lái)，我們將介紹如何使用CSS實(shí)現(xiàn)這一功能。

@media screen and (orientation: landscape) {
body {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 100vh;
height: 100vw;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}

上述代碼的作用是判斷屏幕是否處于橫屏狀態(tài)，如果是，則通過(guò)transform屬性將整個(gè)body元素旋轉(zhuǎn)90度，同時(shí)設(shè)置寬度和高度，并將溢出部分隱藏。此外，我們還可以使用position屬性將元素固定在屏幕底部，以免用戶看到旋轉(zhuǎn)后的頁(yè)面。需要注意的是，該代碼只能在視口寬度大于等于高度時(shí)有效。

此外，我們還可以使用CSS媒體查詢來(lái)實(shí)現(xiàn)對(duì)橫屏顯示的禁止。具體實(shí)現(xiàn)方法如下：

@media only screen and (max-device-width: 768px) and (orientation: landscape) {
body {
display: none;
}
}

代碼中，我們使用了@media媒體查詢，并通過(guò)限制設(shè)備寬度和橫屏狀態(tài)來(lái)控制樣式。當(dāng)設(shè)備寬度小于等于768像素且處于橫屏狀態(tài)時(shí)，我們將body元素的display屬性設(shè)為none，即完全隱藏該元素。

綜上所述，使用CSS禁止橫屏顯示可以改善用戶體驗(yàn)，提高網(wǎng)站質(zhì)量。我們可以通過(guò)多種方法來(lái)實(shí)現(xiàn)，根據(jù)實(shí)際需要和設(shè)計(jì)要求選擇合適的方法。