Как правильно сверстать шапку сайта адаптивно?

Question

[SemenyukS]

Всем привет, у меня при верстке сайта на телефоны и планшеты появилась следующая проблема :
Дело в том, что разрешения экранов больше 480px и где то до 700px страница сверсталась непонятным образом :


Как видно на фото, два последние резрешения унаследовали стили с маленьких экранов, ХОТЯ в медиазпросах задано media only screen and (max-width : 480px), а медиазапросы для планшетов применяются только для разрешений iPad Air.
Помогите, пожалуйста, решить эту проблему ! Почему эти разрешения применяют стили маленьких экранов, и, самый главный вопрос, КАК сврестать элементы шапки так, чтобы они не уплывали вниз при увеличении экрана???
Спасибо за ответ !

@media only screen and (max-width : 480px) {
header {
        background-size: 100%;
        height: 450px;
        width: 100%;
    }
#header_text h2 {
        font-size: 26px;
        line-height: 33px;
        margin-top: -31% !important;
    }
header a button {
        margin-top: 42%;
    }

Comments

[Eugene]

Так у вас height и в пикселях и в процентах, поэтому блин, и плющит, :) а как же иначе?

[SemenyukS]

blasheevich: а как лучше задать оба значения : в процентах или пикселях ?

[Eugene]

Смотрите в гугле типо:
масштабирование картинки с сохранением пропорций,
css правильное масштабирование фона.

Answer 1

[Ankhena]

Всего кода не показываете, по этому:

Не видно где вы пишете media, возможно они просто перебиваются другими свойствами - смотрите, что написано в DevTools.

Про margin.
Если margin задан в %, то считается он от ширины родительского блока.

Кроме этого еще есть эффект схлопывания margin (легко гуглится). Это опять таки одно из предположений.

Answer 2

[Artemdikmarov]

Можно ли посмотреть данный сайт, он размещен ли где-либо?

Comments

[SemenyukS]

Пока нет, я его только разрабатываю