Как в данном случае работают media запросы?

Question

[Никита Савельев]

Например, в данный момент ширина моего экрана 320px. И у меня есть media (min-width: 480px){какие-то св-ва}.

Будет ли браузер тратить время на чтение всего css файла, или он остановится только на стилях до ширины 480px? Или он читает весь файл, но просто не отображает стили несоответствующие условиям?

И в чем плюсы mobile first подхода?
Стилей меньше не становится независимо от того как верстать, через min-width или через max-width.
Или плюс состоит лишь в том, что браузер, когда читает файл делая это сверху-вниз, сначала натыкается на "мобильные" стили?

Answer 1

[Сергей delphinpro]

Браузер пропустит медиа-блоки, которые не подходят.

В вашем случае на ширине 320 блок media (min-width: 480px) будет пропущен, ибо он означает стили, применяемые на ширине от 480 пикселей.

Или плюс состоит лишь в том, что браузер, когда читает файл делая это сверху-вниз, сначала натыкается на "мобильные" стили?

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

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