1

Сделал страницу, которая идеально помещается в разрешение 1280x894 Требуется, чтобы она целиком отображалась на всех устройствах - от меню до футера Для этого я попробовал на более маленьких разрешениях сдвигать вверх футер и чёрный блок под ним, закрывающий остальной контент

Проверял работу сайта на разных разрешениях на http://quirktools.com/screenfly

@media почему-то не работает, и указанные в нём настройки не включаются при проверке на подходящих устройствах

Привожу использованный код:

@media screen and (min-device-height: 849px) and (max-device-height: 899px) {
    body footer #relativefooter {
        bottom: 51px
    }
    
    body footer .end {
        bottom: 51px
    }
}
 
@media screen and (min-device-height: 799px) and (max-device-height: 848px) {
    body footer #relativefooter {
        bottom: 101px
    }
    
    body footer .end {
        bottom: 101px
    }
}
 
@media screen and (min-device-height: 767px) and (max-device-height: 799px) {
    body footer #relativefooter {
        bottom: 133px
    }
    
    body footer .end {
        bottom: 133px
    }
}
 
@media screen and (min-device-height: 600px) and (max-device-height: 766px) {
    body footer #relativefooter {
        bottom: 300px
    }
    
    body footer .end {
        bottom: 300px
    }

Сайт, над которым ведётся работа: lvtgroup.ru

Я новичок, поэтому буду очень благодарен, если поможете разобраться и решить проблему

1
  • device-height вместо min-device-height попробуйте использовать, возможно не поддерживается полноценно этот вариант написания. Вроде бы, только Хромом. Ну и с min-device-width аналогично. 24 апр 2017 в 14:33

1 ответ 1

0

@media screen and (max-device-height: 899px) {
    body footer #relativefooter {
        bottom: 51px
    }
    
    body footer .end {
        bottom: 51px
    }
}
 
@media screen and (max-device-height: 848px) {
    body footer #relativefooter {
        bottom: 101px
    }
    
    body footer .end {
        bottom: 101px
    }
}
 
@media screen and (max-device-height: 799px) {
    body footer #relativefooter {
        bottom: 133px
    }
    
    body footer .end {
        bottom: 133px
    }
}
 
@media screen (max-device-height: 766px) {
    body footer #relativefooter {
        bottom: 300px
    }
    
    body footer .end {
        bottom: 300px
    }

Попробуй написать условия вот так. Так проще и должно заработать.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.