Один файл CSS для всех @media против отдельного файла CSS для каждого @media

Question

Если у меня есть все типы мультимедиа в одном файле CSS, например,

, то ниже приводится содержание style.css

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}

@media print {
 /* Style adjustments for Print go here */
}

Будет ли загружать браузер загрузку части CSS @media only screen and (min-width: 480px) и @media print, если я открою файл на устройстве с min-width: 768px?

или браузер загрузит весь css на устройство, даже если он никогда не будет использоваться на том же устройстве.Например, для устройств с максимальным width из 480px в обеих ориентациях никогда не потребуется код CSS, написанный для устройства с шириной или высотой 480px, даже если CSS кэшируется.это будет бесполезно?

Является ли использование отдельного файла CSS для каждого носителя лучшим для производительности?

Что может повысить производительность, HTTP-запрос или отдельный и только необходимый код, необходимый для устройства?

Answer 1

Поскольку общий размер будет примерно одинаковым, но вы увеличите число запросов с 1 до 3, я бы посоветовал вам поместить их все в один файл .

Браузер загрузит полный размер все 3 CSS-файлы в любом случае .

Answer 2

Лучше поместить весь ваш код CSS в один файл.Если вы используете медиа-запросы внутри тега CSS-файла, большинство браузеров загрузят все CSS-файлы.Я проверил это в Chrome, FF, IE.Чем больше CSS-файлов вы загружаете, тем больше у вас HTTP-запросов.

По моему мнению, единственной ситуацией, когда вы захотите использовать отдельный CSS-файл, будет CSS для браузеров IE (не только) с использованием этихhtml-теги (пример):

<!--[if lt IE 7 ]> <link rel="stylesheet" href="ie7.css" /> <![endif]-->

Здесь вы по-прежнему используете другой HTTP-запрос, предполагая, что пользователь будет использовать IE7 в широкополосном или WiFi-соединении, это не причинит вашему пользователю большого вреда.

Использование @import в основном файле CSS для загрузки других файлов также потребует большего количества HTTP-запросов.

Хорошей практикой является правильная организация кода CSS, чтобы не повторять стили для одних и тех же классов /идентификаторы.

Если у вас очень сложный код CSS, вы можете использовать такие инструменты, как SASS или LESS , или вы всегда можете минимизировать свой код CSS с помощью CSS Compressor или Minify CSS.

Answer 3

Mobile Boilerplate помещает их в один и тот же файл CSS http://html5boilerplate.com/mobile, но я видел, что другие адаптивные проекты используют несколько файлов.

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

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

Вы не использовали max-width в приведенном выше примере, поэтому стили для 480px будут также использоваться для 768px (если не перезаписаны) - это то, что вы намеревались?

Answer 4

Если вы можете попытаться только включить необходимые * .css файлы на странице, проверив наличие агента пользователя.

Это даст пользователям только необходимые загрузки и будетэффективен в вашем случае.Не забудьте дать один файл каждому имеющемуся «носителю».