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

Question

[Pizert]

Всем привет.
Начал изучать верстку. Сверстал один простой макет без адаптива, потом по урокам сделал адаптив. Там в макете было три версии (десктоп, планшет 768px и мобильная 320px). Теперь ищу макеты на различных ресурсах и почти всегда попадаются либо только десктоп версии, либо десктоп + мобильная. Как действовать в такой ситуации? Я так понимаю, что если мобильная версия есть, то делаю mobile first, потом сам переделываю под планшет, ну и беру версию для десктопа из макета. Но тут у меня вопросы по брейкпоинтам. Нормально ли делать всего три брейкпоинта (десктоп, 768px, 320px) или нужно делать больше, чтобы сайт растягивался всегда, а не только переключался на этих состояниях?
Вот пример макета, который нашел https://www.figma.com/community/file/1129496513774...

Comments

[Ankhena]

Как действовать в такой ситуации?

Придумать самостоятельно.

Нормально ли делать всего три брейкпоинта (десктоп, 768px, 320px) или нужно делать больше, чтобы сайт растягивался всегда, а не только переключался на этих состояниях?

Должно хорошо выглядеть при любом размере вьюпорта.
Нужна ли резина в промежутках указывают в ТЗ.

Я так понимаю, что если мобильная версия есть, то делаю mobile first

Желательно mobile first, даже если у вас нет макета для мобилки.

Но у некоторых компаний в ТЗ написано desktop first. Поэтому имеет смысл уметь в обе стороны.

Answer 1

[richvoronov]

Адаптив верстается в зависимости от тех задания. Если тех задания нет и не известно какие устройства будут поддерживаться вы вольны сами определить тот минимум устройств которые будете поддерживать. Например: desktop ( > 1180px), laptop ( > 920px ), tablet ( > 480px ), mobile ( >320px )

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