媒体查询不能在Chrome浏览器中工作，但可以在Firefox中工作?

问题描述

我当前正在工作的网站没有为chrome中480px以下的设备设置样式，但在Firefox中工作，chrome正在为800px和1200px的媒体查询设置样式，而我终生无法接受找出为什么它不接受480px媒体查询的原因.

The site I'm currently working on isn't picking up my styling for devices under 480px in chrome but is working in firefox, chrome is picking up the media queries for 800px and 1200px and I cannot for the life of me figure out why it isn't picking up the 480px media query.

请参见下面的样式表.

@media screen and (max-width:1200px) {

.ui-tabs .tab {
    clear:both;
    height:386px;
    width:550px;
    margin:0 auto;
}

.ui-tabs .groundFloor {
    background:url(img/groundFloor_550.jpg) top center;
}

.ui-tabs .firstFloor {
    background:url(img/firstFloor_550.jpg) top center;
}

.ui-tabs .secondFloor {
    background:url(img/secondFloor_550.jpg) top center;
}

}


@media screen and (max-width:800px) {

#slide1 h1.logo {
    width:350px;
}

.mainnav {display:none;}
.navMobile {display:block;}

.navMobile {
    height:auto;
}

.navMobile .menuBox {
    height:auto;
    min-height:40px;
    width:100%;
    display:inline-block;
    position:fixed;
    top:0;
    left:0;
    right:0;
    background:#fff;
    z-index:99999;
}

.navMobile .menuBox ul {
    display:block;
    clear:both;
    height:auto;
    width:100%;
    padding:0;
    margin:0;
    border-top:1px solid #eee;
    font-family: "proxima-nova";
}

.navMobile .menuBox ul>li {
    display:block;
    clear:both;
    padding:10px 0;
    text-align:center;
    border-bottom:1px solid #eee;
}

.navMobile .menuBox ul>li a {
    padding:0;
    margin:0;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color:#ccc;
    font-size: 0.9em;
    font-weight:500;
    opacity: 1;
}

.navMobile .menuBox ul>li a:hover,.mainnav ul>li a:focus {
    text-decoration: none;
}

.navMobile .menuBox ul>li:last-child a {
    margin-right: 0;
    padding-right: 0;
}

.navMobileBtn {
    clear:both;
    height:40px;
    width:40px;
}

.button {
    margin-left: -37px;
}

.home-block {
    width:100%;
    margin-right:0;
}

.caption {
    font-size: 1.6em;
}

.building .area .colLarge {
    float: none;
    clear: both;
    width: 100%;
    padding:0;
    padding-top: 2%;
}

.building .area .colSmall {
    float: none;
    clear:both;
    width:100%;
    padding:0;
    padding-top: 2%;
}

.building .area .divide .divideLeft {
    float: none;
    clear:both;
    width: 100%;
    padding:0;
    padding-top: 4%;
}

.building .area .divide .divideRight {
    float: none;
    clear:both;
    width: 100%;
    padding:0;
    padding-top: 4%;
}

.ui-tabs ul li {
    font-size:1.2em;
}

.formBox {
    display:inline-block;
    float:none;
    clear:both;
    height:auto;
    width:100%;
    margin:0;
}

.formBox .title {
    float:left;
    margin-right:4%;
    width:100%;
}

.formBox .firstName {
    float:left;
    margin-right:4%;
    width:100%;
}

.formBox .surname {
    float:left;
    width:100%;
}

.formBox .email {
    float:left;
    margin-right:4%;
    width:100%;
}

.formBox .number {
    float:left;
    width:100%;
}

.formBox .businessType {
    float:left;
    margin-right:4%;
    width:100%;
}

.formBox .businessType input[type=text] {
    padding-left:2%;
    width:100%;
}

.formBox .unit {
    float:left;
    width:100%;
}

.formBox .additionalInfo {
    float:left;
    width:100%;
}

.formBox .additionalInfo input[type=text] {
    padding-left:1%;
    width:100%;
}

.formBox input[type=text] {
    display:block;
    width:97%;
    height:30px;
    padding-left:3%;
    border:0;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px; /* border radius */
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; /* prevents bg color from leaking outside the border */
    background-color: #ebebeb; /* layer fill content */
    font-size:0.8em;
    color:#797886;
}

.formTop {
    display:inline-block;
    float:none;
    clear:both;
    height:auto;
    width:100%;
    margin:0;
}

.formSubmit {
    float: none;
    clear:both;
    width: 90%;
    margin: 30px auto;
}

form.mobileForm {
    display:block;
}

form.mainForm {
    display:none;
}

@media screen and (max-width: 480px) {

#slide1 h1.logo {
    width:250px;
}

.ui-tabs ul li {
    font-size:0.8em;
    font-weight:100;
}

.ui-tabs .tab {
    clear:both;
    height:211px;
    width:300px;
    margin:0 auto;
}

.ui-tabs .groundFloor {
    background:url(img/groundFloor_300.jpg) top center;
}

.ui-tabs .firstFloor {
    background:url(img/firstFloor_300.jpg) top center;
}

.ui-tabs .secondFloor {
    background:url(img/secondFloor_300.jpg) top center;
}

}

推荐答案

您正在进行一些错误的嵌套操作，或者括号不正确.如果我删除实际的样式，它看起来像这样:

You've got some bad nesting going on, or incorrect braces. If I remove the actual styles, it looks like this:

@media screen and (max-width:1200px) {

}

@media screen and (max-width:800px) {

/* Missing } brace here */

@media screen and (max-width: 480px) {

}

Firefox可能只是以不同的方式处理错误.请注意这一点，您应该一切顺利.

Firefox is probably just handling the error differently. Take care of that and you should be good to go.

这篇关于媒体查询不能在Chrome浏览器中工作，但可以在Firefox中工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！