Media css что?

1. Понимайте @media как условие применения правил. Оно может проверять ширину области просмотра, режим печати или предпочтение уменьшенного движения.
2. Для узкой раскладки напишите, например: @media (max-width: 40rem) { .menu { flex-direction: column; } }. Исходное display: flex у меню должно быть задано отдельно.
3. Это условие не определяет модель телефона. Оно сработает и на компьютере, если окно достаточно узкое.
4. Проверьте метатег viewport в HTML, чтобы мобильный браузер использовал ожидаемую ширину страницы.
5. Выбирайте границу по моменту, когда содержимому становится тесно. Не нужно подбирать отдельное число для каждой модели устройства.
6. Правила внутри @media участвуют в обычном каскаде: более сильное совпадающее правило может их переопределить. Смотрите это в Styles при выбранной ширине.

Проверьте медиазапрос:

• Условие написано в скобках, например (max-width: 40rem).
• Правила находятся внутри фигурных скобок @media.
• Размер проверяется по viewport, а не по названию устройства.
• В HTML задан корректный viewport.
• Исходная раскладка работает до срабатывания условия.
• В Styles видно, что нужное правило не проиграло другому.

Медиазапросы применяются и к печати, и к пользовательским предпочтениям, поэтому не сводятся только к телефонам.