如何在横向视图上处理媒体查询

Question

你好朋友我有一个网站，其中有两个标题，一个标题出现在mob视图上，另一个出现在桌面视图上。我使用@media隐藏并显示标题，它工作正常，直到我倾斜我的手机。当我倾斜我的手机时，隐藏的标题弹出这里是我用过的一段代码。

 @media only screen and (max-width:767px)  {

.mobcat{
    display: none;

}

Answer 1

您可以像这样

简单地将(orientation: landscape)添加到您的查询中

    @media only screen and (max-width:767px)  and (orientation: landscape)   
    {
    .mobcat{ 
          display: none;
           }
    }

或

 @media (max-width:767px) and (orientation: landscape) { 
        .mobcat{ 
              display: none;
               }
       }