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.

Bootstrap隐藏为肖像，但显示为景观

1 个答案: