Как работают медиазапросы?

Question

[newaitix]

@media(max-width: 426px){
#halat-calc .form>div {
width: 100% !important;
display: block !important;;
float: none !important;;
}
}

На ширине 425 не применяется

Comments

[Михаил]

применяется, ищите проблему в другом

[newaitix]

Где?
Можете сами посмотреть.
https://test.logreel.xyz/

[Антон]

newaitix, И что не так

[newaitix]

Антон, я про chrome. В chrome не работает.

[Антон]

newaitix, Ответ смотрите

Answer 1

[Антон]

<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0 minimal-ui">

Comments

[newaitix]

емммм не знал спасибо.

Answer 2

[Stimulate]

@media(max-width: 426px) {
    #halat-calc .form > div {
        width: 100% !important;
        display: block !important;
        float: none !important;
    }
}

Comments

[newaitix]

не работает.

Answer 3

[Глеб Варганов]

А вы правильно в html написали?
Знаете как работает селектор ">"?

Вот для примера запилил jsfiddle, где все работает.


А отвечая на ваш вопрос, медиазапросы понимают указанную мин и макс ширину и в зависимости от этих параметров, можно на разные экраны выводить разные стили. Так они и работают, если просто...

PS
Вот широкий экран

Вот меньше 426px

Comments

[newaitix]

Да знаю. Все правильно
Вот один стиль

#halat-calc .form>div {
	width: 48%;
	display: inline-block;
	float: left;
	padding-right: 11px;
}

И вот он в консоли

Вот второй стиль

И как видите он не работает

[Глеб Варганов]

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

К чему я все это? Что если у меня в примере они работают, то это значит что код составлен верно и ошибка где то закралась у вас.

Answer 4

[cristalex]

#halat-calc .form > div

Очень плохая практика писать такие селекторы:
1) Использовать id в стилях лучше всего только если у блока больше нет никаких классов, если есть доступ к HTML лучше всегда добавляйте свой класс. А ID лучше оставить для использования в JS.
2) > div - а нужно ли вам оформлять таким образом тег? Возможно лучше ему класс присвоить? Почитайте про методологии типа БЭМ и прочие.
3) Длинная цепочка вложенных сеекторов. Если так писать весь CSS на сайте то в будущем при увеличении страниц на сайте это чревато увеличением пересекающихся стилей и кучей проблем с разруливанием стилей на разных страницах. Время на поддержку таких стилей увеличивается много кратно. И что самое главное, правя один такой стиль никогда нельзя быть уверенным что ничего больше не сломается на другой странице, где он же может применяться. Опять таки почитайте про методологии вёрстки.