通过媒体查询 orientation 判断屏幕的方向，显示不同的样式
html
<p class="orientation">屏幕方向：</p>css
@media all and (orientation: landscape) {
.orientation::after {
content: '横屏';
color: #3eaf7c;
}
}
@media all and (orientation: portrait) {
.orientation::after {
content: '竖屏';
color: #327bce;
}
}效果
屏幕方向：
反转屏幕查看不同的效果