Как реализовать адаптивность?

Question

[booogabooo]

Пишу, так как с таким никогда не сталкивался.
Подскажите, как такое можно реализовать

Правило для страницы авторизации: для мобильных устройств менее 260 dpi должен загружаться макет меньшего размера, для устройств более 260 dpi – макет большего размера. Правило не касается устройств Apple, так как они однозначно сообщают когда являются Айпадами, на которым отдаем макет большего размера безотносительно разрешения.
Правило для приложения: на основании метрики браузера пользователя (размеры экрана в пикселях и разрешение экрана в ppi) вычисляем физический размер экрана. Если он меньше 5,7 дюйма – отдаем макет меньшего размера, если больше – отдаем макет большего размера. Правило не касается устройств Apple, так как они однозначно сообщают, когда они Айподы/Айфоны или Айпады. Первым отдаем макет меньшего размера, вторым – большего.

+ ко всему этого нужно сделать следующее...
есть набор из 3 групп страниц
-- desctop
-- планшет
-- смартфон
всего на 1 макет есть 5 страниц

desctop (от 1280px)
планшет (960 - портретная, 1280 - альбомная)
смартфон (320 - портрет, 540 - альбом)

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

Подскажите...onload тут не прокатит, а по-другому - не имею понятия как

Answer 1

[Lorem Ipsum]

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}

CSS media queries

Comments

[booogabooo]

спасибо...
в таких подробностях media запросы не знал

[Serj-One]

booogabooo: Всё верно, но (orientation: portrait) и(orientation: landscape) здесь уже лишние.