Адаптивный шаблон - нужен помощь (совет)

[xwildx]

Решил переделать шаблон сайта в адаптивный. До этого никогда такого не делал, начал изучать вопрос в принципе ничего сложного не увидел. Но не знаю как будет лучше. Требуется совет как будет лучше (правильней):
1. Для разных разрешений сделать свой css файл и подключить их таким образом
<link rel='stylesheet' href='URL_по_умолчанию.css' />
<link rel='stylesheet' media='(min-width: 480px)' href='1.css' />
<link rel='stylesheet' media='(max-width: 480px)' href='2.css' />
<link rel='stylesheet' media='(max-width: 640px)' href='3.css' />
....

2. Или в одном css  через media
@media (min-width: 480) { бла бла бла}
@media (max-width: 480) and { бла бла бла}
@media (max-width: 640px) { бла бла бла}
....
Будет ли в первом варианте браузер грузить все css, или же будет грузить только нужный, и создаст ли первый вариант дополнительные запросы. И вроде как IE это не понимает.
При  втором способе понятно css нехило разрастется в размере.
Посоветуйте как будет лучше?
Или сделать через java понимают все и грузится нужный css но вдруг java офф

[ВикторияИ]

При  втором способе понятно css нехило разрастется в размере.

делаю именно таким способом - пока проблем со скоростью загрузки не наблюдаю, но в принципе меня тоже интересует Ваш вопрос...

[Haosame]

Чаще всего видела именно второй вариант. Когда разные размеры описаны в одном файле.

По первому варианту сдается мне что у клиента будут грузится все файлы. Причем весьма в интересном порядке, если размеры у него 640. Сначала загрузится основной файл, потом два 480, потом наконец 640.

Как показывает опыт, чем больше файлов грузится, тем дольше ответ от страницы. Лучше пусть будет один файл побольше. В конце концов кто вам мешает засунуть его потом в какой-нибудь сервис по минимизации CSS-файлов.

[alexandrius]

Я тоже считаю 2 вариант наилучшим. Да и код не сильно разрастётся, если правильно всё прописать. Ведь большинство свойств, прописанных в css останутся неизменными, так как не зависят от размера области просмотра...

А насчёт 1 способа Haosame верно пишет! Гугл ругается, даже когда 1 внешний css файл есть и просит всё встроить в html. Если файлов несколько будет, то ещё сильней ругаться будет...

[bibika]

В первом случае более удобно править код, но подключать кучу файлов это лишняя нагрузка. Поэтому тоже голосую за второй вариант. У себя я так делал есть основной файл стилей и дополнительный с @media (min-width: 480) { бла бла бла}

[ВикторияИ]

интересно бы узнать насколько сложно осуществление ПХП-подстановки нужного файла CSS в зависимости от разрешения пользователя...

[Андрей88]

Второй вариант правильнее, но есть еще и третий вариант:
все стили, которые в медиазапросах сжать и залить с подключением в head, а второй дoкумент, без медиазапросов не сжимать и также подключить, два файла css это норма. Даже пресловутый бутстрап грузит их три, если я не ошибаюсь.