Правильное подключение Media Queries

[Coolbits]

Всем привет!

Разбираюсь с адаптивной версткой на Media Queries, все сделал. Не могу определиться как более оптимально подключить их. Получилась довольно внушительная "простыня" CSS (65кб). Как их лучше подключить: в общий файл CSS или разбить на отдельные файлы в зависимости от разрешения экрана?

 

1. Если каждый файл будет отдельно и подключатся будет через

<link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">

то будет ли браузер скачивать все файлы или ограничится только нужным? Была бы экономия нескольких килобайт при загрузке страницы. 

 

2) Если все правила идут в одном файле, то можно чуть сэкономить на селекторах: если при разрешениях экрана 1024 и 800 какой-то блок не выводится, то display:none достаточно указать для max-width:1024

Но CSS-файл будет большой общий.

 

Поделитесь опытом, пожалуйста! Спасибо!

 

 

[rus]

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

[progressive]

Мне для этого очень помогает сборщик проектов Grunt и CSS препроцессор Less

 

Получается запись типа:

// До компиляции.content {	padding-right: 30px;	width: @content-width;	float: left;	@media (max-width: @screen-bp) {		float: none;	}}// После.content {	padding-right: 30px;	width: 800px;	float: left;}@media (max-width: 1200px) {	.content {		float: none;	}}

Нет необходимости гулять по файлу или файлам в поиске селекторов. Так же при помощи Grunt медиа запросы группируются и убираются в конец файла, а сам файл полностью минифицируется.

Данный подход сложен, но при должном изучении значительно увеличивает скорость написания кода.