Короче:
Должны ли вы использовать один или несколько таблиц стилей при выполнении адаптивного веб-дизайна?
Подробнее:
В отзывчивом дизайне вы, как правило, имеете один основной кусок CSS, затем другие биты и куски, чтобы настроить макет, когда он достигает определенных точек останова. Вы можете структурировать свой код одним из двух способов:
Единая таблица стилей
/* Main CSS */
@media only screen and (min-width: 480px) { /* CSS */ }
@media only screen and (min-width: 640px) { /* CSS */ }
@media only screen and (min-width: 800px) { /* CSS */ }
Несколько таблиц стилей
<link rel="stylesheet" media="screen" href="main.css">
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="480.css">
<link rel="stylesheet" media="only screen and (min-width: 640px)" href="640.css">
<link rel="stylesheet" media="only screen and (min-width: 800px)" href="800.css">
Кажется, что использование одной таблицы стилей уменьшит количество HTTP-запросов, но у вас будет больший файл, который будет содержать код, который не может использоваться некоторыми клиентами. Кажется, что несколько стилей уменьшают размеры файлов, но тогда у вас больше запросов HTTP.
Когда вы должны выбирать для каждого подхода? Как все плюсы и минусы количества HTTP-запросов и размера файла складываются на практике?
