Когда менять дизайн от десктопа к таблету и от таблета к мобайлу?

Question

[eugenedrvnk]

Есть в фигме 3 варианта дизайнов, на 1440, 768 и 320px.
Необходимо имея их сделать резиновую вёрстку, которая на каких-то брейкпоинтах переходит от одного дизайна к следующему, на каких брейкпоинтах именно это делать?
Т.к. где-то встречаю что таблет - это <=768, где то >768 & <=1024 и к чему-то конкретному прийти не удаётся.

Comments

[Ankhena]

к чему-то конкретному прийти не удаётся

И не удастся.
Каждый макет индивидуален. (Ну разве что будете делать копеечные сайты по принципу ctrl+c ctrl+v).

на каких брейкпоинтах именно это делать?

Там где ломается.
Причем для разных блоков это могут быть разные брейкпоинты.

Главное, что на любом экране, при любом размере окна выглядело прилично.

Есть дешевый вариант:
Ставят 2-3 брейкпоинта с фиксированной контентной шириной. На всех остальных будут поля.

Смотрите сайт с различных реальных устройств. Так глазками увидите, где что не так.

[Антон Литвиненко]

все индивидуально, но так если подумать и взять за базовые брейкпоинты бутстрапа, мобильный дизайн будет от 320 и как минимум до 576, ато и аж до 768, это зависит от макета, от 768 и вверх пойдет таблетка как минимум до 992, ато и больше, десктоп стартует плюс-минус от 1200 и вверх. Повторюсь, все индивидуально, я написал самые часто встречающиеся случаи

Answer 1

[RuRoman]

Отлично справляется с этим:

@media (min-width: ---px) and (max-width: ---px) {
}

где "---" - необходимое разрешение

Answer 2

[imko]

Я думаю тебе специально эти разрешения дали в фигме в качестве брейкпоинтов. Так что мобила до 768, планшет до 1440. Хотя честно сказать довольно странно, тогда ноутбуки попадают на планшет