CSS 媒体查询不适用于 Chrome 但在 Firefox 中？

Media queries not working in Chrome but in Firefox?

提问by dennisterrey

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.

我目前正在使用的网站没有为 480 像素以下的设备在 chrome 中获取样式，而是在 Firefox 中工作，chrome 正在获取 800 像素和 1200 像素的媒体查询，我一生都无法弄清楚为什么会这样没有选择 480px 媒体查询。

Please see the stylesheet below.

请参阅下面的样式表。

@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;
}

}

回答by Wesley Murch

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 is probably just handling the error differently. Take care of that and you should be good to go.

Firefox 可能只是以不同的方式处理错误。照顾好这一点，你应该很高兴去。

回答by chriz

Try this:

尝试这个：

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

Source >>

来源>>