Какова должна быть ширина адаптивных блоков?

Question

[DmitryLife]

Всем привет.

Я определился с тем, что буду делать адаптив под след. расширения экранов:
375
425
768
1024
>1024

У меня такой вопрос. Если в media запросе стоит max-width: 1024px, какой ширины должен быть контейнер при этом!?
Мне если честно не совсем понятно. Если я сделаю например 980px. То при ширине экрана 800px все поедет, а media запрос по 768px еще не включиться.

Логика подсказывает, что надо сразу тогда делать контейнер под 768px на мониторах >768 && <1024.

Или прописывать еще более мелкие media запросы?
Но судя по устройствам, их просто тысячи различных:
spirelightmedia.com/resources/responsive-design-de...

Answer 1

[65536]

Каждый блок должен уметь себя корректно отображать на любой ширине от 320. Медиа запросы надо прописывать именно блокам, а не насаживать глобально на всю верстку. Там половина интернета едет из-за этого. Нереально подчинить все до единого блоки на сайте одному набору диапазонов. Тем более каких диапазонов, откуда эти списки вообще берутся? Экран может быть вообще любой.

Еще бывает очень нужно делать медиазапросы к элементам, а не окну. Например, при пропадании левой менюхи основной блок становится опять большим, хотя окно при этом уменьшалось. Есть вот такая штука https://github.com/marcj/css-element-queries, но она должна использоваться как корректирующая, то есть вторым номером после обычных медиазапросов, так как слегка не сразу после загрузки страницы отрабатывает

Answer 2

[xonar]

Странные у вас параметры экранов под адаптив. Я делаю под параметры из бутстрапа, они и у остальных популярны.

https://bootstrap-4.ru/docs/4.1/layout/grid/

Логика подсказывает, что надо сразу тогда делать контейнер под 768px на мониторах >768 && <1024.

Так сделайте контейнер не фиксированным, а max-width дайте и если экран будет ужиматься, он будет подстраиваться под него.

Comments

[DmitryLife]

Спасибо, думаю воспользуюсь данной сеткой

Answer 3

[Lord_Dantes]

Контейнер делаю 100 процентов :)

Адаптив у меня такой:
- 767
- 992
-1200

И все норм.