Bootstrap 隐藏纵向但显示横向

Posted 2023-03-06

【中文标题】Bootstrap 隐藏纵向但显示横向

【英文标题】：Bootstrap hide for portrait but show for landscape

【发布时间】：2014-08-29 01:40:03

【问题描述】：

假设我有一个包含 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;

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

欢迎提出任何建议

【参考方案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.

【讨论】：

为什么两个媒体查询相同？

一个是最小值，另一个是最大值