隐藏小屏幕和超小屏幕尺寸设计中的内容 [英] Hide content from small and extra small screen size devises

问题描述

当设备更改时，我需要从屏幕上隐藏一些HTML内容.这意味着我正在尝试创建一个响应式设计.在小屏幕尺寸(768像素以下)中，我想隐藏一些内容.

I need to hide some HTML contents from the screen when the devices are changing. That mean I am trying to create a responsive design. In small screen sizes (below 768px) I want to hide some contents.

我的内容是这样的-

<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>

因此，我想从小型和超小型屏幕设计中隐藏此内容.

So I want to hide this contents from small and extra small size screen devises.

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

I tried it using LESSCSS but no luck

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

希望有人会帮助我.

谢谢.

推荐答案

为什么不使用

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

如果您要隐藏屏幕尺寸小于768px的内容

if you want to hide the content for screen-size below 768px

这篇关于隐藏小屏幕和超小屏幕尺寸设计中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！