Адаптивная сетка на основе медиа-запросов @media позволяет создавать отзывчивые веб-сайты, которые автоматически изменяют свой макет в зависимости от размера экрана пользователя.
Когда мы говорим о том, на сколько нужно уменьшать контейнер с использованием @media, это зависит от нескольких факторов, таких как дизайн вашего сайта, предпочтения пользователей, видовых экранов и устройств, на которых ваш веб-сайт будет отображаться.
Один из наиболее распространенных подходов в сетке адаптивного дизайна - резиновая или жидкая сетка. В этом случае контейнер масштабируется пропорционально размеру экрана, то есть может уменьшаться и увеличиваться, чтобы заполнить доступное пространство. Это позволяет вашему сайту прекрасно выглядеть на различных устройствах разных размеров.
Тем не менее, существует также фиксированная сетка, в которой контейнер имеет определенную ширину и не меняется с изменением размера экрана. В этом случае вам придется использовать медиа-запросы для изменения визуального представления различных элементов на странице (таких как ширина, высота, отступы и т. д.), чтобы они выглядели оптимально на разных экранах.
Размер, на который нужно уменьшить контейнер, вам придется определить самостоятельно в зависимости от ваших целей и требований к дизайну. Некоторые разработчики и дизайнеры рекомендуют использовать так называемые "точки разрыва" (breakpoints) - конкретные значения ширины экрана, на которых будет изменяться внешний вид вашего сайта. Например, вы можете решить, что ваш контейнер должен быть уменьшен на 20% от исходной ширины, когда ширина экрана становится меньше 768 пикселей.
Определение точек разрыва и размера, на который нужно уменьшить контейнер в медиа-запросе, может потребовать некоторого опыта и экспериментирования. Рекомендуется использовать инструменты разработчика браузера, такие как инспектор элементов, чтобы наблюдать, как ваш сайт реагирует на изменение размера экрана и какие правила CSS применяются в разных точках разрыва.
В итоге нет однозначного ответа на вопрос, на сколько уменьшать контейнер в медиа-запросе. Очень важно анализировать требования вашего проекта, учитывать пользовательский опыт и доступные ресурсы для принятия правильного решения.