CSS Media Max Width | Основы адаптивного дизайна

CSS Media Query - это мощный механизм, который позволяет настраивать стили для различных устройств и экранов. В частности, @media max-width позволяет задавать стили, которые будут применяться только при ширине экрана не больше заданного значения.

Примеры таких стилей могут включать изменения размера шрифта, отступов, расположения элементов или скрытие некоторых элементов на мобильных устройствах.

Вот простой пример стиля @media max-width, который изменяет размер текста при ширине экрана не больше 700 пикселей:

@media screen and (max-width: 700px) {

body {

font-size: 14px;

}

}

Здесь мы используем ключевое слово @media, затем указываем, что это для типа экрана «screen» и условие ширины экрана «(max-width: 700px)». Далее мы применяем новый размер шрифта для тега body при ширине экрана менее 700 пикселей.

При использовании @media max-width также удобно скрывать некоторые элементы на маленьких экранах для повышения удобочитаемости. Например, мы можем скрыть боковое меню при ширине экрана менее 500 пикселей:

@media screen and (max-width: 500px) {

.sidebar {

display: none;

}

}

Здесь мы используем @media max-width, чтобы указать, что этот стиль должен применяться только при ширине экрана менее 500 пикселей. Затем мы применяем свойство display: none для класса .sidebar, чтобы скрыть его на маленьких экранах.

Таким образом, использование CSS Media Query @media max-width позволяет создавать более удобочитаемые и адаптивные сайты и приложения, которые оптимизированы для различных размеров экранов и устройств.