Какая должна быть последовательность media запросов?

Question

[stalerum]

Привет.
Делаю адаптивную верстку.
Сначала написал стиль для desktop, затем ниже стал выстраивать media запросы такого плана:

@media screen and (max-width: 1200px){}
@media screen and (max-width: 800px){}
@media screen and (max-width: 360px){}
@media screen and (max-width: 320px){}

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

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

Answer 1

[Никита]

ну вообще если у вас это в 1м файле, пользователь в любом случае будет ждать пока загрузиться весь файл.

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

Если дизайн сделан по сеточке, то использование системы сеток уже значительно уменьшает объем вашего кода. Сетку так же можно резануть у буцрапа.

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