Блог

Я новичок в изучении адаптивного дизайна. Что я заметил в своем путешествии, так это то, что когда я помещаю медиа-запросы в нижнюю часть таблицы стилей, все работает безупречно в отношении точек останова. Если я помещаю медиа-запросы в верхнюю часть таблицы стилей, ничего не работает, и только недавно я узнал, что мне нужно добавить !important и max-DEVICE-width (в отличие от max-width ) к изменяемому css.

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

Почему, когда я помещаю медиа-запросы в верхнюю часть таблицы стилей, мне нужно добавить !important , а также max-DEVICE-width для того, чтобы точки останова работали на настольных компьютерах и мобильных устройствах?

Потому что css читается сверху вниз. Правило, которое устанавливается последним, будет выполняться.

Переводя, это выглядит так:

 @media (max-width: 600px) { //If my screen fits this size
    .text {
        color: red; //Paint it red
    }
}

.text {
    color: yellow; //Now, forget about everything and paint it yellow!
}
  

Когда вы добавляете !important , это все равно, что сказать:

 @media (max-width: 600px) { //If my screen fits this size
    .text {
        color: red !important; //Paint it red, and don't change it ever!!!
    }
}

.text {
    color: yellow; //Ok, I'm not going to paint it yellow....
}
  

CSS читается сверху вниз. Все, что находится под каким-либо другим css, перезапишет то, что находится поверх него. Однако можно использовать !important в конце параметра CSS, чтобы он перезаписывал все остальное

 body{
    background-color: black !important;
}

body{
    background-color: pink;
}
  

Цвет фона будет черным.
Если вы удалите !important , он будет розовым.

Медиа-запросы каскадируются с остальной частью таблицы стилей. Вы можете чередовать медиа-запросы в своей таблице стилей, и поэтому вы также можете каскадировать стили по мере необходимости.

Например:

 .my-class {
    color: red;
}

.my-class--modifier {
    color: blue;
}

@media screen and (min-width: 760px) {
    .my-class--modifier {
        color: green;
    }
}

.some-other-class {
    width: 200px;
}

@media screen and (min-width: 760px) {
    .some-other-class {
        width: 700px;
        background-color: gray;
    }
    .some-other-class .my-class {
        border: 2px solid red;
        border-radius: 4pt;
    }
}
  

Это работает именно благодаря каскадной природе CSS. Вы можете организовать медиа-запросы по мере необходимости на основе разделов, отдельных селекторов и многого другого.

В основном вы используете медиазапросы, когда хотите применить стили CSS в зависимости от общего типа устройства (например, печать или экран), конкретных характеристик (таких как ширина области просмотра браузера) или среды (например, условия окружающего освещения).

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

Следовательно, порядок выглядит следующим образом: сделать полный дизайн -> Добавить медиа-запрос, соответствующий желаемым размерам экрана внизу.

Предпочтительнее писать запрос в нижней части, который имеет приоритет. Это избавит вас от стресса при использовании important! каждый раз.