媒体查询不起作用，从移动设备查看时隐藏 Bootstrap jumbotron答案

【问题标题】：Media query not working, hiding Bootstrap jumbotron when viewed from mobile device媒体查询不起作用，从移动设备查看时隐藏 Bootstrap jumbotron
【发布时间】：2017-04-09 22:30:44
【问题描述】：

无法让媒体查询工作，试图在从移动设备查看时隐藏 jumbotron。

url tyrescanner.net 下面的代码

  /* Extra Small Devices, Phones */ 
  @media screen and (max-width: 380px) {
        .customjumbotron{
            background-color: black;
        }
    }

        <div class="row no-container">
            <div class="col-md-12">        
                <div class="jumbotron text-center customjumbotron">                
                    <img class="img-responsive image-center" src="../Images/Nectar-CollectPoints.png" height="130" width="490" style= "margin-bottom: -10px"" />
                    <h2>Search for tyres and prices in your local area</h2>                                              
                    <div class="searchbox">
                       <div class="input-group input-group-lg">           
                         <div class="input-btn-toolbar" style="width:107%; height: 100%;">                                                         
                            <div class="input-btn-toolbar" style=" background-color:#313131; padding-left:5px; padding-top:7px; padding-bottom:3px; padding-right:3px;">                                                                    
                              <asp:TextBox style="text-transform: uppercase; width:100%; font-size: 23px; text-align: center;" ID="txtReg" class="form-control"  runat="server" placeholder="Enter Registration"></asp:TextBox>                                             
                                 <span class="input-group-btn" >                                                          
                                    <asp:LinkButton class ="btn btn-default btn-default1" OnClick="ButtonSearch_Click"  height="49"  runat="server" type="button" style="color:white" ID="bntSearch"><span aria-hidden="true" class="glyphicon glyphicon-search"></span></asp:LinkButton>
                                 </span>
                           </div>    
                        </div>    
                     </div>    
                  </div>  
               </div>
            </div>
        </div>

【问题讨论】：

你现在让它显示在最大宽度为 380px 的屏幕上...你不希望它只显示在更大宽度的屏幕上吗？
我已将其更改为 min-width: 380px 我在标题中也有
您的所有媒体查询都在应用黑色背景。它应该为小屏幕隐藏任何东西吗？
抱歉，我正在尝试用移动设备查看时将 jumbotron 图像替换为黑色背景。
啊，好的，知道了。请参阅下面的答案。

标签： twitter-bootstrap-3 media-queries

【解决方案1】：

要使 jumbotron 在小屏幕上显示为黑色背景，请将 color: black; 添加到您的媒体查询中。这样，jumbotron 中的所有内容都会显示为黑色（尽管可能有更优雅的方法来做到这一点）。

工作示例：

  /* Extra Small Devices, Phones */ 
  @media screen and (max-width: 380px) {
        .customjumbotron{
            background-color: black;
            color: black;
        }
        #imgID {
            display: none;
        }
        #imgHide {
            display: block;
        }
    }

  /* Larger Devices */ 
  @media screen and (min-width: 381px) {
        #imgHide {
            display: none;
        }
    }

        <div class="row no-container">
            <div class="col-md-12">        
                <div class="jumbotron text-center customjumbotron">                
                    <img class="img-responsive image-center" id="imgID" src="../Images/Nectar-CollectPoints.png" height="130" width="490" style="margin-bottom: -10px" />
                    <img class="img-responsive image-center" id="imgHide" src="" height="130" width="490" style="margin-bottom: -10px"></div>
                    <h2>Search for tyres and prices in your local area</h2>                                              
                    <div class="searchbox">
                       <div class="input-group input-group-lg">           
                         <div class="input-btn-toolbar" style="width:107%; height: 100%;">                                                         
                            <div class="input-btn-toolbar" style=" background-color:#313131; padding-left:5px; padding-top:7px; padding-bottom:3px; padding-right:3px;">                                                                    
                              <asp:TextBox style="text-transform: uppercase; width:100%; font-size: 23px; text-align: center;" ID="txtReg" class="form-control"  runat="server" placeholder="Enter Registration"></asp:TextBox>                                             
                                 <span class="input-group-btn" >                                                          
                                    <asp:LinkButton class ="btn btn-default btn-default1" OnClick="ButtonSearch_Click"  height="49"  runat="server" type="button" style="color:white" ID="bntSearch"><span aria-hidden="true" class="glyphicon glyphicon-search"></span></asp:LinkButton>
                                 </span>
                           </div>    
                        </div>    
                     </div>    
                  </div>  
               </div>
            </div>
        </div>

编辑：现在为小屏幕隐藏 jumbotron 中的图像。

【讨论】：

@Tom 如果这不是您想要的，您能否说明您还想完成什么？
我已经给css添加了颜色，但是还是不行！
是的，这正是我要找的，但它不起作用...当我从移动设备查看页面时，仍然显示 jumbotron 图像，而不仅仅是黑色背景：/(
@Tom 立即尝试。在小屏幕上隐藏图像。

【解决方案2】：

我资助了这个问题，我不得不向 Jumbotrom 添加另一个媒体查询

@media only screen and (min-width : 992px) {
    .customjumbotron {
        /*.jumbotron*/
        background: url('../Images/Tyre.jpg') no-repeat center center;
        background-size: cover;
        background-attachment: fixed;
        min-height: 410px;
        min-width: 100%;
        width: 100%;
        margin-right: 0px !important;
        margin-left: 0px !important;
        margin-bottom: 0px;
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 0px;
    }
}

【讨论】：

380px 和 992px 之间的一切呢？
感谢 freginold，非常感谢 :)

【解决方案3】：

首先确定你需要什么样的 iPhone 让它隐藏阅读iPhone 6 Screen Size and Web Design Tips。然后使用不同iPhone版本的点来为max-width或min-width添加值来创造变化，你可以使用两者中的任何一个。但是如果添加多个 iPhone 版本断点的断点，请注意其他设备的断点，而不仅仅是 iPhone。我在下面的示例代码中使用最大 iPhone 版本的最小宽度，以便您的设计轻松更改所有 iPhone，但这取决于：

使用最大的 iPHONE 版本最低分数：

<style type="text/css">
  /* iPhone 6/7 Plus | 414 x 736 points */
    @media only screen and (max-width : 414px) {
       body{
        background-color: teal;
       }
       .customjumbotron{
          display: none;
       }
    }
</style>

使用 iPhone 版本最大宽度：

<style type="text/css">

    /* iPhone 4 | 320 x 480 points */
    @media only screen and (max-width : 480px) {
       body{
        background-color: gold;
       }
       .customjumbotron{
          display: none;
       }
    }

    /* iPhone 5 | 320 x 568 points */
    @media only screen and (max-width : 568px) {
       body{
        background-color: silver;
       }
       .customjumbotron{
          display: none;
       }
    }

    /* iPhone 6/7 | 375 x 667 points */
    @media only screen and (max-width : 667px) {
       body{
        background-color: teal;
       }
       .customjumbotron{
          display: none;
       }
    }

    /* iPhone 6/7 Plus | 414 x 736 points */
    @media only screen and (max-width : 736) {
       body{
        background-color: teal;
       }
       .customjumbotron{
          display: none;
       }
    }
</style>

使用不同的 iPhone 版本最小宽度：

<style type="text/css">

    /* iPhone 4 | 320 x 480 points */
    @media only screen and (min-width : 320px) {
       body{
        background-color: gold;
       }
       .customjumbotron{
          display: none;
       }
    }

    /* iPhone 5 | 320 x 568 points */
    @media only screen and (min-width : 320px) {
       body{
        background-color: silver;
       }
       .customjumbotron{
          display: none;
       }
    }

    /* iPhone 6/7 | 375 x 667 points */
    @media only screen and (min-width : 375px) {
       body{
        background-color: teal;
       }
       .customjumbotron{
          display: none;
       }
    }

    /* iPhone 6/7 Plus | 414 x 736 points */
    @media only screen and (min-width : 414px) {
       body{
        background-color: teal;
       }
       .customjumbotron{
          display: none;
       }
    }
</style>

默认引导媒体查询

<style type="text/css">
/*==================================================
          Bootstrap 3 Media Queries
==================================================*/

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
        /* YOUR CODE HERE|EXAMPLE CODES*/
       body{
        background-color: black;
       }
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
        /* YOUR CODE HERE|EXAMPLE CODES*/
       body{
        background-color: blue;
       }
    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
         /* YOUR CODE HERE|EXAMPLE CODES| SET HERE WHAT YOU NEED TO HIDE OR ANYTHING*/
       body{
        background-color: green;
       }
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
        /* YOUR CODE HERE*/
    }
</style>

【讨论】：