llgruff
@llgruff
PHP в прошлом, сейчас Scala. Не зовите меня на WP.

Под какие значения @media адаптировать дизайн сайта?

Например:
Основная версия от 960px
#Tablet (Portrait - Ipad)
@media only screen and (min-width: 768px) and (max-width: 959px) { }
#Mobile (Portrait)
@media only screen and (max-width: 767px) { }
#Mobile (Landscape)
@media only screen and (min-width: 480px) and (max-width: 767px) { }

Есть ли статистика какие значения лучше использовать?

UPD Сам откопал и опубликовал ссылки, а то набежали Петросяны мериться в комментариях остроумием, но при этом ни одного ответа на поставленный вопрос.

  • Вопрос задан
  • 1990 просмотров
Решения вопроса 1
llgruff
@llgruff Автор вопроса
PHP в прошлом, сейчас Scala. Не зовите меня на WP.
B-ww-mar-may-2015.jpgИсточник

c8b86656c9de435c806298ea676beb45.PNGИсточник

Ещё статистика

Брейкпоинты фрэймворков
breakpoints.pngСтаренькое
Responsive-Widths_0.pngНа закуску
Viewport Sizes

UPD. Из презентации Яндекса о адаптивности интерфейсов:
599b833421454dd9988f4d6b01c95f81.png
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
teotlu
@teotlu
Навёрстываю упущенное
Я один из безумного количества уже заданных здесь вопросов про ширину в адаптивной вёрстке.
Ответ написан
hronik87
@hronik87
Обитаю в 1С-Bitrix
Смотря как дизайнер задумал. Если всегда на 100% экрана, то тут уже зависит от разработчика. Мне обычно хватает пилить до max 1920px. А так медиа запросы могут быть разными. Если у тебя допустим блок текста всегда на 100%, внутри обычным текст, то нафига ему медиа запросы? Задаешь ему ширину в 100% и он у тебя уменьшается. Если два блока с текстом, то по 50% задал, на ширине при 320-479 просто убрал обтекание и выровнял по центру, все.
Тут по ситуации надо смотреть, но если не юзать бутстрап, то примерно вот как получается:
320 - 479;
480 - 639;
640 - 767;
768 - 959;
960 - 1023;
1024 - 1279;
1280 - 1439;
1440 - 1599;
1600 - 1920;
Да и то тебе не все могут понадобиться. Смотри по ситуации.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы