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...*/ 
}

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

我也成功地在Web应用程序中使用了它(不是Bootstrap).你必须测试:

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