无法让媒体查询正常工作，在从移动设备查看时试图隐藏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>
答案 0 :(得分：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>
编辑：现在将屏幕中的图像隐藏在小屏幕上。
答案 1 :(得分：0)
我资助了这个问题，我不得不向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;
}
}
答案 2 :(得分：0)
首先确定您需要哪种类型的iPhone才能隐藏首先阅读iPhone 6 Screen Size and Web Design Tips。然后使用不同iPhone版本的点数为最大宽度或最小宽度添加值来创建更改，您可以使用两者中的任何一个。但是如果你添加多个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 VERSION MAX-WIDTH：
<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 VERSION MIN-WIDTH：
<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>
DEFAULT BOOTSTRAP MEDIA QUERIES
<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>