CSS3背景图像高度问题

Question

大家好， 上图是我的设计。所有这些都是背景图像（LHS，RHS，BG，Footer）。在所有决议中我的设计都正常运作。问题是“HEIGHT”...... RHS和LHS的高度在所有屏幕尺寸分别为355px和692px时保持不变。

这两天以来，我一直在摸不着头脑。这个问题。

这是我的代码：

HTML：

<div class="wrapper">
        <div class="rhs pull-right"> </div>
        <div class="clear"> </div>
        <div class="apps">
        <a href="">
     <img src="jquery-mobile/images/apple.png"></a>
        <a href="">
        <img src="jquery-mobile/images/googleplay.png"></a>
        </div>       
        <div class="lhs pull-left"> </div>
        <div class="clear"> </div>
    </div>

CSS：

.lhs {
    margin-top:-13%;
    background:url(../images/quote-01.png) no-repeat;
    height:692px;
    width:644px;
    background-size:auto !important;
    }

    .rhs{
    margin-top:10%;
    background:url(../images/logo.png) no-repeat;
    height:355px;
    width:494px;
    background-size:auto !important;
    }


 @media (min-width:320px) and (max-width:480px) {
    .wrapper {width:100%; height:auto;}
.rhs{height:220px !important;background-size:100% !important; min-height:220px !important;}
.lhs {height:320px !important;background-size:100% !important; min-height:320px !important;}
.footer{width:100%;background-size:100% !importantheight:auto; ;}
.apps {width:30% !important;}
}



    @media (max-width:960px){
    body{background-size:cover !important;}
    .rhs{background:url(../images/logo.png) no-repeat right;
    background-size:100% !important; 
        max-width:100% !important; }
    .lhs{background:url(../images/quote-01.png) no-repeat;
    background-size:100% !important; 
    max-width:100% !important; 
    max-height:100% !important;}
    }

希望我的问题对每个人都清楚。

Answer 1

我从来不知道媒体查询的顺序也起主要作用。上述问题的答案是将@media(min-width:320px) and (max-width:480px) {}置于最大尺寸@media (max-width:960px){}之下。一切都很完美。所以，我对那些正在努力应对响应的初级人员的建议是，＃34;从最大屏幕尺寸开始查询，以避免像这样的愚蠢问题。＆＃34;