css禁止横屏显示 |css样式叠加

@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;
}
}

上述代码的作用是判断屏幕是否处于横屏状态，如果是，则通过transform属性将整个body元素旋转90度，同时设置宽度和高度，并将溢出部分隐藏。此外，大家还可以使用position属性将元素固定在屏幕底部，以免用户看到旋转后的页面。需要注意的是，该代码只能在视口宽度大于等于高度时有效。

此外，大家还可以使用CSS媒体查询来实现对横屏显示的禁止。具体实现方法如下：

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

代码中，大家使用了@media媒体查询，并通过限制设备宽度和横屏状态来控制样式。当设备宽度小于等于768像素且处于横屏状态时，大家将body元素的display属性设为none，即完全隐藏该元素。

综上所述，使用CSS禁止横屏显示可以改善用户体验，提高网站质量。大家可以通过多种方法来实现，根据实际需要和设计要求选择合适的方法。