влияние на производительность нескольких реагирующих деклараций

Я не совсем уверен, что лучший способ поместить объявления, такие каквлияние на производительность нескольких реагирующих деклараций

@media screen and (max-width: 600px) { 
    // 
}

в моей таблице стилей. Если, например, у меня есть блок правил, относящихся к некоторому элементу (например, боковая панель), и я хочу включить с ним некоторые гибкие правила, тогда возникает соблазн вставить вышеуказанный код вместе со всеми другими правилами для боковой панели , Но тогда у меня может быть какой-то другой элемент (например, заголовок), который также должен каким-то образом измениться, когда ширина экрана ниже 600 пикселей. Тогда в итоге я получу несколько объявлений @media screen and (max-width: 600px), разбросанных по моему CSS-файлу. Но для меня больше смысла - устанавливать приоритеты группировки CSS-правил в соответствии с элементами HTML, которыми они управляют.

Могу ли я это сделать? Есть ли негативное влияние на производительность от наличия

@media screen and (max-width: 600px) { 
    .sidebar { 
     font-size: 12px; 
    } 
} 

@media screen and (max-width: 600px) { 
    .header { 
     font-size: 16px; 
    } 
}

вместо

@media screen and (max-width: 600px) { 
    .sidebar { 
     font-size: 12px; 
    } 
    .header { 
     font-size: 16px; 
    } 
}

источник

2014-10-08 Inigo

Вопрос в том, почему вы хотите поставить каждое замедление в свой собственный медиа-запрос? Это не имеет для меня никакого смысла, я боюсь, объедините их всех вместе ... Вы не ставите отдельные декларации в отдельные таблицы стилей? Если вы хотите, чтобы весь код для Navbar был сгруппирован вместе, тогда помещайте комментарий вокруг него. – Richlewis

Поскольку мне легче смотреть на таблицу стилей и видеть все правила, относящиеся к элементу (и его дочерним элементам), сгруппированным вместе в одном и том же месте , Это включает в себя ответные запросы, поэтому я могу сразу определить дополнительные правила, которые относятся к рассматриваемому элементу, когда экран имеет определенный размер. Вместо того, чтобы спрятать их в другом месте, где мне нужно прокрутить страницу (или открыть отдельный файл), чтобы найти их. – Inigo

Я бы так не сделал. Создайте свой сайт для небольших vieports, затем сделайте минимальную ширину и разместите там свои большие видовые экраны. Тогда более мелкие устройства не получают стилей, которые они даже не будут использовать, и вы также можете загружать изображения меньшего размера для них и более крупные в мин. ширина – Christina

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

источник

2014-10-08 22:08:12 Justin

Нет заметной потери производительности с использованием нескольких медиа-запросов, а не только одного. Тем не менее, , если вы изменяете размер или увеличиваете масштаб изображения в своем браузере, может быть максимальный объем памяти и загрузка процессора. Вы не будете изменять размер своего браузера, но частично видимым пользователям необходимо увеличить свой веб-сайт и т. Д.

Вы должны рассмотреть использование препроцессора CSS, такого как Less, SASS или Stylus. Запрос информации может быть размещен как свойство CSS в правиле:

// app.less 

@max-width: 600px; 

.sidebar { 
    background: #2c2c2c; 
    @media screen and (max-width: @max-width) { 
     font-size: 12px; 
    } 
}

Если вы не можете использовать CSS Препроцессора, то не дублировать медиазапросы из-за техническое обслуживание кошмара.

источник

2014-10-08 23:31:58

влияние на производительность нескольких реагирующих деклараций

ответ

Смежные вопросы