Почему media запрос обрабатывается не правильно?

Question

[Рамиль]

В html записан вот такой тег. Разрешение устройства явно не попадает в заданный диапазон. Проверял в веб инспекторе. Но почему то стили все равно загружаются на сайте. Мне казалось что стили не должны загружаться в случае если медиа выражение не выполняется.

<link type="text/css" rel="stylesheet" href="/sites/default/files/css/css_JzJU2q_K9XiQApcqbkJg_PWAoZ8u0E_tlt9VuQ.css" media="only screen and (min-width: 768px) and (max-width: 1024px)">

Comments

[Ankhena]

Они не будут выполняться, но загружаться будут. (на случай, если ширина браузера изменится)

Answer 1

[whoisthere]

Стили загружаются всегда, все, независимо от того сколько медиа запросов.
Чтобы они заработали, их нужно подключать после основных стилей.

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="media.css" media="only screen and (min-width: 768px) and (max-width: 1024px)">

Если медиа выражение не отрабатывает. Значит работают основные стили. При достижении BreakPoint они переключаются на стили из медиа запроса. При условии если они подключены после основных. Иначе придется городить вредные !important

Comments

[Рамиль]

Тоесть в любом случае будет грузить все стили ? Тогда смысл этого атрибута в теге link . Можно с таким же успехом прописать стили в css. Не понимаю.

[Егор Живагин]

Рамиль: а ты проверь в инспекторе. Может они будут подгружаться, только когда экран соответствует запросу?

[whoisthere]

Рамиль: стили из media запросов срабатывают, когда экран устройства в писывается в указанные брейк поинты, в вашем случае это (min-width: 768px - max-width: 1024px)

[Рамиль]

Егор Живагин: так я проверял в инспекторе. Он грузится даже когда не нужен. Тоесть когда не подподает под условие медиа запроса. На мобильных устройствах интересно тоже самое поведение? Что если верстать от мобильного к настольному. Тогда получается в мобильном будут грузиться стили для компа но при этом эти стили не будут нужны там вообще. Как то не логично.

[whoisthere]

Рамиль: Такого быть не может. Где-то допустили ошибку.

[Егор Живагин]

Рамиль: если это не срабатывает, можно скриптом проверять ширину при загрузке и грузить стили для ПК/Планшетов/Мобилок отдельно

[Рамиль]

whoisthere: а где ошибка? Медиа запрос вот он прописан. Я не понимаю почему грузятся стили.

[whoisthere]

Рамиль: живой пример сделайте или скиньте ссылку

[Рамиль]

whoisthere: codepen.io/vafarulez/pen/ygxQQE Извини за такое плохое качество примера. Если открыть инспектор кода и сделать ширину дисплея больше чем 1024px то можно наблюдать как загружается файл print.css в вкладке network.

[Рамиль]

Рамиль: Хотя при этом стили не применяются но загружаются.

[whoisthere]

Рамиль: Все правильно. Вы же прописали его в тегах LINK, он загружается сразу, а стили от него начинают применяться когда экран вписывать от 768px до 1024px. Media запросы не влияют на загрузку файла, только на применение.