html - Bootstrap 隐藏纵向但显示横向

Question

假设我有一个包含 3 个 li 元素的 ul。如何在纵向模式下隐藏最后两个 li 元素并在横向模式下显示所有 3 个元素？使用 CSS offcourse 和 Bootstrap 3。

<div class="header-box pull-left">
  <ul>
   <li class="usp">
     <a href="link" title="usp">
       <span class="usp-text">usp</span>
     </a>
   </li>
   <li class="usp hide-for-xs">
     <a href="link" title="usp">
       <span class="usp-text">usp</span>
     </a>
   </li>
   <li class="usp hide-for-xs">
     <a href="link" title="usp">
       <span class="usp-text">usp</span>
     </a>
   </li>
  </ul>
</div>

我想做这样的事情:

.show-for-landscape{
display:block!important;
}

但这如何与媒体查询一起使用呢？什么是屏幕尺寸等的良好设置？

欢迎大家提出建议

Answer 1

您可能会更幸运地使用针对设备方向的媒体查询，例如:

@media screen and (max-device-width: 1000px) and (orientation:landscape){
   /*...your special rules for landscape...*/ 
}

我不确定移动浏览器对方向属性的整体支持，但我知道它适用于我当前所有的 iOS 和我的 Android Galaxy Note 和 S4 native 浏览器。我确实知道这只会针对移动设备——桌面浏览器会完全忽略它——因此，将 max-device-width 属性设置为 1000px 将安全地仅影响移动设备并且在桌面上查看时没有影响。

我还在网络应用程序中成功使用过它(不是 Bootstrap)。你必须测试:

@media screen and (min-aspect-ratio: 13/9){ } // landscape and 
@media screen and (max-aspect-ratio: 13/9){ } // portrait.