0

У сайта есть несколько брейкпоинтов (1280, 760 и т.д.). На hd устройствах, все работает, как ожидается. Но на других, у которых макс ширина, например 1024, сайт показывается, как для ширины 760+. Как можно указать брейкпоинты, в зависимости от реальной ширины устройства, что для экранов 1024 и для экранов 1280 и больше вид был одинаковый? (Использую react + material ui)

1 ответ 1

0

Просто используйте те брейкпоинты, которые вам реально нужны. Также можете комбинировать условия 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) { ... }
3
  • Наверное, я не правильно донес вопрос. Нужно, чтобы на устройствах с макс шириной 1024px сайт отображался, как будто макс ширина 1280px
    – I K
    16 ноя 2021 в 15:40
  • возможно нужно использовать % отношение (получать в js) и уже его использовать в качестве брейкпоинта
    – I K
    16 ноя 2021 в 15:42
  • Насколько понимаю, у вас @media прописаны через min-width, поэтому на экране 1024px отображается как на 760px. Замените на @media (max-width: ) и тогда на экране 600px будет отображаться как на 760px, а на экране 1024px - как на 1280px
    – object417
    16 ноя 2021 в 19:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.