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 本机浏览器。我确实知道这只会针对移动设备——桌面浏览器完全忽略它——因此，设置为 1000px 的 max-device-width 属性将安全地只影响移动设备，并且在桌面上查看时没有影响。

我也成功地在一个网络应用程序中使用了它（不是 Bootstrap）。你必须测试：

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