Question

每当我调整浏览器大小时，看看我的媒体查询是否正常工作，都没有任何反应。这是我的代码

@media only screen and (max-width: 500px) {
 .navbar-custom {
background-color: #8AC007;
color:#ffffff;
border-radius:0;
min-height:auto;
}

.navbar-custom .navbar-nav > li > a {
color:#fff;
padding-left:25px;
padding-right:25px;
padding-top:20px;
}
.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active>
a:hover,.navbar-nav > .active > a:focus {
    color: #FFFFF;
    background-color:transparent;
    }

.navbar-custom .navbar-nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background-color: #FFF;
color:#8AC007;
}

    .navbar-custom .navbar-brand {
   color:#FFFFF;
   padding:20px;
}

.navbar-custom .navbar-toggle,
.navbar-custom .nav .open>a, .navbar-custom .nav .open>a:hover, 
.navbar-custom .nav .open>a:focus {
background-color:transparent;
color:#FFF;
}

.navbar-custom .icon-bar {
border: 1px solid #fff;                
}

/*-- change navbar dropdown color --*/
.navbar-custom .navbar-nav .open .dropdown-menu>li>a,.navbar-custom     .navbar-nav .open .dropdown-menu {
color:#8AC007;
}
.carousel{
position:asbolute;
top:-20px;
margin-bottom:60px;
height:100%;
}
.carousel .item {
  height: 320px;
}

.item img {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
}
a:hover{
text-decoration:none;
}
.first-slide{
width:100%;
z-index:-1;
height:100%;
background-image:url(https://www.apple.com/osx/elcapitan-preview/static/osx-preview/overview/hero/image_large.jpg);
background-size:100% 100%;
}
.second-slide{
width:100%;
z-index:-1;
height:100%;
background-image:url(http://images.nationalgeographic.com/wpf/media-live/photos/000/187/cache/canyons-utah_18730_990x742.jpg);
background-size:100% 100%;
}
.third-slide{
width:100%;
z-index:-1;
height:100%;
background-image:url(Website%20Pics/mountain.jpg);
background-size:100% 100%;
}
.fourth-slide{
width:100%;
z-index:-1;
height:100%;
background-image:url(TheRoad.jpg);
background-size:100% 100%;
}
.join{
color:#FFFFF;
text-decoration:none;
}
#join:hover{
color:#FFFF;
text-decoration:none;
}

#Drew{
position:absolute;
left:0%;
top:100%;
height:100%;
width:100%;
}
#DrewDescription{
position:absolute;
left:0%;
top:100%;
font-size:150%;
text-align:center;
z-index:10000;
color:rgba(57,196,232,1.00);
}
#Ben{
position:absolute;
left:0%;
top:200%;
height:100%;
width:100%;
}
#BenDescription{
position:absolute;
left:0%;
top:200%;
font-size:150%;
text-align:center;
z-index:10000;
color:rgba(57,196,232,1.00);
}
#David{
position:absolute;
left:0%;
top:300%;
height:100%;
width:100%;
}
#DavidDescription{
position:absolute;
left:0%;
top:300%;
font-size:150%;
text-align:center;
z-index:10000;
color:rgba(57,196,232,1.00);
}
#Tay{
position:absolute;
right:0%;
top:400%;
height:100%;
width:100%;
}
#TayDescription{
position:absolute;
left:0%;
text-align:center;
top:400%;
font-size:150%;
z-index:10000;
color:rgba(57,196,232,1.00);
}
}
}

和宽度大于500px的css

@media only screen and (max-width: 500px) {
.navbar-custom {
background-color: #8AC007;
color:#ffffff;
border-radius:0;
min-height:auto;
}

.navbar-custom .navbar-nav > li > a {
color:#fff;
padding-left:25px;
padding-right:25px;
padding-top:20px;
}
.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active >
a:hover, .navbar-nav > .active > a:focus {
color: #FFFFF;
background-color:transparent;
}

.navbar-custom .navbar-nav > li > a:hover, .nav > li > a:focus {
text-decoration: none;
background-color: #FFF;
color:#8AC007;
}
.navbar-custom .navbar-brand {
color:#FFFFF;
padding:20px;
}

.navbar-custom .navbar-toggle,
.navbar-custom .nav .open>a, .navbar-custom .nav .open>a:hover,
.navbar-custom .nav .open>a:focus {
background-color:transparent;
color:#FFF;
}

.navbar-custom .icon-bar {
border: 1px solid #fff;                
}

/*-- change navbar dropdown color --*/
.navbar-custom .navbar-nav .open .dropdown-menu>li>a,.navbar-custom
.navbar-nav .open .dropdown-menu {
color:#8AC007;
}
.carousel{
position:asbolute;
top:-20px;
margin-bottom:60px;
height:100%;
}
.carousel .item {
height: 600px;
}

.item img {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
}
a:hover{
text-decoration:none;
}
.first-slide{
width:100%;
z-index:-1;
height:100%;
background-image:url(https://www.apple.com/osx/elcapitan-
preview/static/osx-preview/overview/hero/image_large.jpg);
background-size:100% 100%;
}
.second-slide{
width:100%;
z-index:-1;
height:100%;
background-image:url(http://images.nationalgeographic.com/wpf/media-
live/photos/000/187/cache/canyons-utah_18730_990x742.jpg);
background-size:100% 100%;
}
.third-slide{
width:100%;
z-index:-1;
height:100%;
background-image:url(Website%20Pics/mountain.jpg);
background-size:100% 100%;
}
.fourth-slide{
width:100%;
z-index:-1;
height:100%;
background-image:url(TheRoad.jpg);
background-size:100% 100%;
}
.join{
color:#FFFFF;
text-decoration:none;
}
#join:hover{
color:#FFFF;
text-decoration:none;
}
.team{
    padding:2%;
}
#Drew{
position:absolute;
left:5%;
top:760px;
height:40%;
width:20%;
border-radius:100%;
}
#DrewDescription{
position:absolute;
left:5%;
right:75%;
top:725px;
font-size:150%;
text-align:center;
}
#Ben{
position:absolute;
left:28%;
top:760px;
height:40%;
width:20%;
border-radius:100%;
}
#BenDescription{
position:absolute;
left:28%;
right:52%;
top:725px;
font-size:150%;
text-align:center;
}
#David{
position:absolute;
left:52%;
top:760px;
height:40%;
width:20%;
border-radius:100%;
}
#DavidDescription{
position:absolute;
left:52%;
right:28%;
top:725px;
font-size:150%;
text-align:center;
}
#Tay{
position:absolute;
right:5%;
top:760px;
height:40%;
width:20%;
border-radius:100%;
}
#TayDescription{
position:absolute;
right:5%;
left:75%;
text-align:center;
top:725px;
font-size:150%;
}
}
}

Answer 1

确保您在页眉中使用视口标记：

<head> <meta name="viewport" content="width=device-width, initial-scale=1"/> </head>

此外，您还需要更改其中一个媒体查询才能阅读(min-width:500px)。如Lyza Gardner在this blog post中所解释的那样，值得考虑改变em（500 px = 31.25em）测量值。在用户在浏览器中手动放大或缩小的情况下，它有助于保持设计的良好效果。

媒体查询无效

1 个答案: