1

パラメータ「最小幅」として幅を使用すると、メディアクエリは正常に機能します。しかし、min-height と max-height を使用すると、最後に入力したサイズが機能します。私のコード:

@media only screen 
and (min-height : 0px)  , screen and (max-height: 600px) {

#guy{
    position:absolute;
    top:180px;
    width:100%;
    height:680px;
    background:url(../img/guy.png);
    background-repeat:no-repeat;
    z-index:1;
    background-size: 650px 450px;
    }

}


@media only screen 
and (min-height : 601px)  , screen and (max-height: 800px)   {

#guy {
    position: absolute;
    top: 80px;
    width: 100%;
    height: 680px;
    background: url(../img/guy.png);
    background-repeat: no-repeat;
    z-index: 1;
    background-size: 450px 250px;
    background-position: center center;
    }

}


@media only screen 
and (min-height : 800px)  , screen and (max-height: 1000px) {

#guy {
    position: absolute;
    top: 160px;
    width: 100%;
    height: 680px;
    background: url(../img/guy.png);
    background-repeat: no-repeat;
    z-index: 1;
    background-size: 650px 450px;
    background-position: center center;
    }

}


@media only screen 
and (min-height : 1001px)  , screen and (max-height: 1600px) {

#guy {
    position: absolute;
    top: 220px;
    width: 100%;
    height: 680px;
    background: url(../img/guy.png);
    background-repeat: no-repeat;
    z-index: 1;
    background-size: 850px 650px;
    background-position: center center;
    }

}

@media only screen 
and (min-height : 1601px)  , screen and (max-height: 4000px) {

        #guy {
    position: absolute;
    top: 260px;
    width: 100%;
    height: 680px;
    background: url(../img/guy.png);
    background-repeat: no-repeat;
    z-index: 1;
    }

}

画面の解像度に関係なく、min-height : 1600px と max 4000px のみが機能します。間違っていなければ、高さをパラメーターとして正しく使用できますか? また、構文の問題もないと思います。誰かがこの問題を抱えていますか？

4

1 に答える 1

3

メディア クエリが正しく記述されていないようです。最初のプロパティの後にコンマがあり、画面を再宣言します。見る：

@media only screen and (min-height : 0px)  , screen and (max-height: 600px) {

対

@media only screen and (min-height : 0px) and (max-height: 600px) {

これを試すと、動作するはずです：

@media only screen and (min-height : 0px) and (max-height: 600px) {

    #guy {
        position:absolute;
        top:180px;
        width:100%;
        height:680px;
        background:url(../img/guy.png);
        background-repeat:no-repeat;
        z-index:1;
        background-size: 650px 450px;
    }
}

@media only screen and (min-height : 601px) and (max-height: 800px) {

    #guy {
        position: absolute;
        top: 80px;
        width: 100%;
        height: 680px;
        background: url(../img/guy.png);
        background-repeat: no-repeat;
        z-index: 1;
        background-size: 450px 250px;
        background-position: center center;
    }
}

@media only screen and (min-height : 800px) and (max-height: 1000px) {

    #guy {
        position: absolute;
        top: 160px;
        width: 100%;
        height: 680px;
        background: url(../img/guy.png);
        background-repeat: no-repeat;
        z-index: 1;
        background-size: 650px 450px;
        background-position: center center;
    }
}

@media only screen and (min-height : 1001px) and (max-height: 1600px) {

    #guy {
        position: absolute;
        top: 220px;
        width: 100%;
        height: 680px;
        background: url(../img/guy.png);
        background-repeat: no-repeat;
        z-index: 1;
        background-size: 850px 650px;
        background-position: center center;
    }
}

@media only screen and (min-height : 1601px) and (max-height: 4000px) {

    #guy {
        position: absolute;
        top: 260px;
        width: 100%;
        height: 680px;
        background: url(../img/guy.png);
        background-repeat: no-repeat;
        z-index: 1;
    }
}

コードペンの実際の例を次に示します: http://codepen.io/kpeatt/pen/pkDxq — フレームの高さを変更して、実際の動作を確認します。

于 2013-03-12T18:29:20.780 に答える