Как правильно использовать media запросы?

Question

[serg_marinkov]

Подскажите пожалуйста как правильно использовать media запросы в CSS при адаптивной верстке? Какую брать максимальную ширину экрана и какой media запрос использовать?
@media only screen and (max-width:1920px) или @media only screen and (min-width:1200px) ?
Есть ли смысл верстать под экраны шириной выше 1920px?

Answer 1

[Антон]

Все зависит от задачи и охвата устройств, для которых нужно реализовать верстку.

Как вариант, для проекта без строгих требований по брейкпоинтам и уточнения поддерживаемых устройств, можно опираться на подход Bootstrap (текущая версия - 4.4), в их сетке используется несколько брейкпоинтов:

• XS (Extra Small) - <576px
  
• SM (Small) - ≥576px
  
• MD (Medium) - ≥768px
  
• LG (Large) - ≥992px
  
• XL (Extra Large) - ≥1200px
  

Ссылка для ознакомления: https://getbootstrap.com/docs/4.4/layout/overview/...

Answer 2

[Арсений Матыцин]

1. Посмотреть, как это делается в фреймах.
2. Необходимость зависит от задачи и финансирования. Но в целом концепция mobile first предполагает возрастающие медиа-запросы, т.е. @media (min-width: 1200px) { ... }, например захватит и 1920.
3. Нужно тестировать в боевых условиях верстку. Порой стоит добавить xxl размер, чтобы гармонично расположить элементы.