隐藏小屏幕和超小屏幕设备的内容答案

【问题标题】：Hide content for small and extra small screen size devices隐藏小屏幕和超小屏幕设备的内容
【发布时间】：2014-07-19 17:22:23
【问题描述】：

当设备发生变化时，我需要从屏幕上隐藏一些 HTML 内容。这意味着我正在尝试创建响应式设计。在小屏幕尺寸（低于 768 像素）中，我想隐藏一些内容。

我的内容是这样的 -

<div class="content-to-hide">
   <div class="container">
        <a class="banner-brand visible-sm visible-md visible-lg" href="index.html">
           <img src=""  alt="" width="280">
        </a>
        <div class="utility-nav">
            <ul>
                <li><a href="#"  id="example" data-toggle="tooltip" data-placement="left" title=""><i class="icon fa fa-users fa-lg"></i><br /><span>xxxxxxxxxxxxxx</span></a></li>
                <li><a href="#" title="View Cart"><i class="icon fa fa-unlock-alt fa-lg"></i><br /><span>Sign in</span></a></li>
             </ul>
             <h2><i class="icon fa fa-phone-square"></i> <span>Hot Line</span>xxx-xxx-xx-xx</h2>
         </div><!-- /.utility-nav -->

    </div><!-- /.container -->
    <div class="hr"><hr /></div>

</div>

所以我想从小尺寸和超小尺寸屏幕设备中隐藏这些内容。

我使用LESSCSS 尝试过，但没有运气

@media (max-width: (@grid-float-breakpoint - 1)) {                  
   .content-to-hide {
      display: none;
   }
}

希望有人能帮助我。

谢谢。

【问题讨论】：

用 php.. 获取屏幕的宽度和高度，并根据结果，执行或不回显该 html 内容
使用 Bootstrap 的Responsive utilities
这不正是 .hidden-xs 的作用吗？

标签： css twitter-bootstrap less

【解决方案1】：

我同意京岛丸的回答。另一种选择可能是使用布局选择器。例如。

@media (orientation:portrait) {
   .my-element {
      display: none; /* visibility: none; */
   }
}
@media (orientation:landscape) and (max-width: 767px) {
   .my-element {
      display: none; /* visibility: none; */
   }
}

【讨论】：

【解决方案2】：

为什么不使用

@media (max-width: 767px) {                  
   .content-to-hide {
      display: none;
   }
}

如果你想隐藏屏幕尺寸低于 768px 的内容

【讨论】：

啊，谢谢谢谢！正是我想要的！