Skip to content

使用媒体查询判断屏幕的方向

通过媒体查询 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;
  }
}
效果

屏幕方向:

反转屏幕查看不同的效果

创建时间:

最近更新: