CSS @media вопрос о подключении стилей и их распределенной загрузке

опять Вы оцениваете средство по конкретным реализациям ;) подобные деятели как раз убивают идею адаптивности, а называть свои "произведения" они могут как им заблагорассудится.

лучшее, что придумали пока это как раз стратегия mobile-first - схема документа проектируется изначально для мобил, максимально сжато и информативно. уже потом в неё пошагово добавляются приблуды, которые в мобиле только мешают и закрыты от визуализации - для планшета что то дополнительное, потом и для десктопа. и открываются эти доп-фичи @media. и этот самый mobile-first (ведущее на данный момент направление адаптивного дизайна), как видите, полностью не подходит под описанный анамнез, ну или они под него - что эквипенисуально.

ЗЫ: Ayavryk, ну прям как в мини-холиваре про фреймворки "я видел пару CMS на этом фреймворке - полная дрянь. значит и фреймворк - то же дрянь", что то на методологию уже смахиват...

По событию onload изображения?

Развели срач на пустом месте... :)

Чтобы порешать проблему ТС надо использовать методологию Mobile First, суть которой - писать CSS сначала для самых маленьких экранов , потом для экранов побольше и в конце для самых больших.

Пример (цифры в max-width условны)

/* белый фон для всех устройств*/
header { 
background-color:#fff;
}

/* маленькая картинка для смартфонов */
@media only screen and (max-width: 480px){
header {
background:url(images/small-image.png);
}
}

/* средняя картинка для планшетов */
@media only screen and (max-width: 800px){
header {
background:url(images/medium-image.png);
}
}
/* большая картинка для мониторов */
@media only screen and (max-width: 1200px){
header {
background:url(images/large-image.png);
}
}

Пример - http://www.epidemvac.ru/

Фоновая картинка в шапке начинает грузиться если ширина экрана > 610 точек

Для многих сайтов так и есть.

---------- Добавлено 06.08.2013 в 18:45 ----------

Это вообще вопрос почти философский. Если кратко, то на сайте о погоде нужен прогноз погоды, а не километры новостей, баннеры и еще какая-то хрень. И дело тут уже не в девайсах.

Разобрал ваш пример, вот его результат. Страница первый раз открывалась в сафари, ширина окна перед открытием изменена. В кеше висит большое гиф изображение из шапки.

Пруф. (Простите за размер)

И опять вы передергиваете. 1) Я никогда не говорил что YII дрянь. Я сказал что мне он не понравился. Это две большие разницы 2) когда YII CMS будет 100 и 1000 ничего не изменится. YII по дефолту генерирует говнокод и в 99% случаев никто это править не будет.

Тут он конечно рубанул не глядя, ибо сайт его студии - это полный капец как в плане юзабилити, так и в плане всего остального. Но ржачно написал.

Самая большая тупость на свете - изготовление отдельных мобильных версий сайтов.

Супер! Хоть какой-то креатив на фоне остальной "децкой фантастики" :::

Типа вопроса к господам и товарищам ::: какого хрена прОцентов 95 (а то и 99) сайтов на нетбуке при 1024 убоги по самое немогу?

не со зла, для "накала страстей" ;) но подход всё одно не корректный: и фреймворк и адаптивный дизайн это средство, основное задача которого дать больше - дать больше свободы в реализации желаемого, по сравнению с более жёсткими технологиями и стратегиями.

а что там со свободой сделали "по дефолту" или от недостатка образования это вторично. у кого то разгул демократии с парадами гомосеков - у кого то халифат с муэдзинами 😂 главное - объём возможностей...

А вот у меня в Chrome

Сделал размер браузера меньше 600 точек, ctrl + f5, очистил список запросов, начал раздвигать экран:

После пересечения границы 610 точек пошел запрос на картинку.

p.s. И да, я про /image/header.gif, а не /image/logo3.gif :)