Question

我目前正在处理的网站并没有采用我的样式来处理低于480px的设备，而是在firefox中工作，Chrome正在接收800px和1200px的媒体查询而我不能用于我的生活弄清楚为什么它没有拿起480px的媒体查询。

请参阅下面的样式表。

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

}

Answer 1

你有一些不好的嵌套或不正确的括号。如果我删除实际样式，它看起来像这样：

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

}

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

/* Missing } brace here */

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

}

Firefox可能只是以不同方式处理错误。请注意这一点，你应该good to go。

Answer 2

试试这个：

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

Source >>

媒体查询无法在Chrome中运行但在Firefox中运行？

2 个答案: