Я пытаюсь использовать медиа-запросы, но они не работают

когда я использую ширину, поскольку мой параметр "min-width" медиа-запросы работают нормально. но когда я использую 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;
    }

}

и независимо от того, какое разрешение у моего экрана, работает только минимальная высота: 1600 пикселей и максимальная 4000 пикселей, если я не ошибаюсь, я могу правильно использовать высоту в качестве параметра? Я также не думаю, что есть проблема с синтаксисом. У кого-нибудь была эта проблема?


html css media-queries
person Dnaso    schedule 12.03.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Похоже, ваши медиа-запросы написаны неправильно. У вас есть запятая после вашего первого свойства, а затем переобъявите screen. Видеть:

@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 — изменить размер высоту кадра, чтобы увидеть его в действии.

person kpeatt    schedule 12.03.2013
comment
nvm ваше право их не было. лошадиные шоры, я ненавижу это, спасибо. - person Dnaso; 12.03.2013
comment
Без проблем! Я обновил ответ, чтобы было более ясно, что не так. - person kpeatt; 12.03.2013
comment
спасибо, одна запятая, чтобы разрушить замок. мне нужно больше спать - person Dnaso; 12.03.2013