Медиа-запросы не работают

Рейтинг: 2Ответов: 2Опубликовано: 30.04.2015

Здравствуйте! Помогите, пожалуйста, советом: пытаюсь с помощью медиа-запросов отрегулировать ширину шапки и контента, но не выходит. Мне нужно, чтобы если экран устройства менее 1024 px, поля не показывались, а шапка и контент занимали 100% экрана, на широкоэкранных мониторах чтобы шапка и контент занимали 53%, остальное, соответственно, поля. Прописывала, вроде бы, правильно:

@media screen and (max-width: 1024px) {
    #main {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #header {
        width: 100%;
        margin: 0;
        padding: 0;
    }
}

#header {
    background-image: url(../images/header.jpg);
    width: 53%;
    height: 239px;
    background-repeat: no-repeat;
    padding: 0px;
    margin: auto;
    border: 1px solid #CCC;
}

#main {
    width: 53%;
    min-height: 800px;
    height: auto;
    margin: auto;
    background-color: #F5F5F5;
    border: 1px solid #CCC;
    overflow: auto;
    font-family: serif;
}

Проверяла неоднократно на устройствах с разрешением менее 1024 px - правила не работают, все равно появляются поля и контент с шапкой занимают 53 %, отчего получается тоненькая полоска (. Что я не так делаю? Может, медиа-запросы не в файл стилей нужно записывать? Как еще можно осуществить задумку? Пробовала также max-device-width, все равно не работает.

css экран адаптивная-верстка
Источник: Stack Overflow на русском

Ответы

▲ 5Принят

Надо поставить media после обычных, чтобы они переопределяли стандартные правила:

#main {
  width: 53%;
}

@media screen and (max-width: 1024px) { 
  #main {
    width: 100%;
  }
}

Можно было бы проверить размер

@media screen and (max-width: 1024px) { 
  #main {
    width: 100%;
  }
}

@media screen and (min-width: 1025px) { 
  #main {
    width: 100%;
  }
}

Но такой метод правильно работает только с пикселями, если там будут другие единицы измерения, то возможны промежуточные стостояния, при которых, в зависимости от реализации, либо не применится ни один блок, либо применятся оба. Поэтому, на мой взгляд, лучше сразу делать с переопределением.

▲ 3

Поскольку у вас общая часть стоит позже запроса она отрабатывает всегда, и "перетирает" условия. Нужно либо поменять порядок (как уже написали) либо сделать условие not для "всего остального" (аналог else):

@media screen and (max-width: 1024px) { 
...
}
@media not screen and (max-width: 1024px) { 
...
}