Задать вопрос
@booogabooo
html

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

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


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


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

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

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

Подскажите...onload тут не прокатит, а по-другому - не имею понятия как
  • Вопрос задан
  • 1472 просмотра
Комментировать
Подписаться 10 Оценить Комментировать
Решения вопроса 1
GeorgeGeorge
@GeorgeGeorge
Студент 
/* #### 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
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Дизайн сайта для web3 проекта
18 апр. 2024, в 16:43
50000 руб./за проект
Составление технических заданий для разработчиков
18 апр. 2024, в 16:41
10000 руб./за проект
Перекрасить 2 вкладыш для типографии в новый цвет
18 апр. 2024, в 15:55
1000 руб./за проект
Ещё заказы