#css #media-queries
Вопрос:
Замедлит ли сайт работу, если я сделаю отдельный медиа-запрос для каждого класса?
Я собираюсь написать
.class1 { /* rules */ } @media only screen and (max-width: 800px) { .class1 { /* rules */ } } .class2 { /* rules */ } @media only screen and (max-width: 800px) { .class2 { /* rules */ } } Вместо (что я вижу повсюду)
.class1 { /* rules */ } .class2 { /* rules */ } @media only screen and (max-width: 800px) { .class1 { /* rules */ } .class2 { /* rules */ } } Комментарии:
1. Какой смысл разделять и повторять «медиапространство» для одного и того же разрешения?
2. @SimoneRossaini, поэтому я сразу вижу полное определение класса и могу исправить его во всех местах.
Ответ №1:
Наличие нескольких медиазапросов не должно влиять на производительность. Но в случае, если ваш проект будет масштабироваться, а добавление большого количества запросов увеличит размер CSS-файла, что может повлиять на производительность сайта.
Комментарии:
1. так что просто первое решение создаст больше кода (повторяющегося
,@media only screen and (max-width: 800px)), который пользователь должен загрузить, верно?