Одна разметка для разных экранов
У сайта есть несколько брейкпоинтов (1280, 760 и т.д.). На hd устройствах, все работает, как ожидается. Но на других, у которых макс ширина, например 1024, сайт показывается, как для ширины 760+. Как можно указать брейкпоинты, в зависимости от реальной ширины устройства, что для экранов 1024 и для экранов 1280 и больше вид был одинаковый? (Использую react + material ui)
Ответы (1 шт):
Автор решения: Object417
→ Ссылка
Просто используйте те брейкпоинты, которые вам реально нужны. Также можете комбинировать условия min-width и max-width, чтобы получить нужные промежутки.
Пример:
/* <= 760px */
@media screen and (max-width: 760px) { ... }
/* 760 < X <= 1280 */
@media screen and (min-width: 761px) and (max-width: 1280px) { ... }
/* > 1280 */
@media screen and (max-width: 1281px) { ... }