Блог

Преобразование веб-сайта в CSS Grid. У меня есть 3 медиа-запроса для 3 размеров экрана. Я хочу оптимизировать свой код для повышения скорости.

Влияет ли размещение всех запросов выше или ниже на сроки первого рисования?

Влияет ли порядок медиа-запросов на время того, что видит мобильный пользователь?

Я использую встроенный инструмент критического пути для встраивания css критического пути в заголовок, чтобы страница могла быть раскрашена до того, как все будет загружено. Все медиа-запросы отображаются в этом критическом пути css. Итак, я думаю, это означает, что первое изображение будет первым изображением для соответствующего размера экрана. Это говорит мне о том, что порядок не имеет значения в отношении скорости.

Мой код отображается нормально независимо от порядка. Так что не беспокойтесь о такого рода проблемах.

Как правило, нет особой необходимости беспокоиться о порядке медиа-запросов, если: а) каждый из них использует значения «min» и «max» для размера экрана, и б) диапазоны не пересекаются. Поскольку я не могу видеть ваши запросы, я не знаю, в какой форме они находятся, но пока они соответствуют стандартам, перечисленным выше, порядок не должен иметь значения.