Black Baron

Современные веб-сайты открываются на самых разных устройствах: компьютерах, ноутбуках, планшетах и смартфонах. Размеры экранов могут значительно отличаться, поэтому страница должна корректно подстраиваться под доступное пространство. Если сайт не адаптирован под мобильные устройства, пользователю будет неудобно читать текст, нажимать кнопки и просматривать содержимое. Для решения этой задачи в CSS используется адаптивная вёрстка и медиазапросы (Media Queries). В данной статье рассмотрим, что такое адаптивная вёрстка, как работают Media Queries и каким образом они помогают создавать удобные интерфейсы для различных устройств.

Что такое адаптивная вёрстка

Адаптивная вёрстка — это подход к созданию веб-страниц, при котором элементы интерфейса автоматически изменяют своё расположение и размеры в зависимости от размера экрана устройства.

Главная цель адаптивности — обеспечить удобное отображение сайта независимо от того, на каком устройстве он открыт.

Например:

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

Что такое Media Queries

Media Queries — это механизм CSS, который позволяет применять стили только при выполнении определённых условий.

Чаще всего медиазапросы используются для проверки ширины экрана.

Общий синтаксис:

@media (условие) {

    CSS-код

}

Пример:

@media (max-width: 768px) {

    body {

        background-color: #f5f5f5;

    }

}

В данном случае стили будут применяться только тогда, когда ширина экрана меньше или равна 768 пикселям.

Использование max-width

Параметр max-width применяется для устройств с небольшой шириной экрана.

Пример:

@media (max-width: 600px) {

    h1 {

        font-size: 24px;

    }

}

Если экран станет меньше 600 пикселей, размер заголовка уменьшится.

Использование min-width

Параметр min-width работает противоположным образом — стили применяются при достижении минимальной ширины.

@media (min-width: 1024px) {

    .container {

        width: 1000px;

    }

}

Такой подход часто используется для настройки отображения на больших экранах.

Адаптивное меню с Flexbox

Media Queries отлично работают совместно с Flexbox.

HTML:

<div class="menu">

    <a href="#">Главная</a>

    <a href="#">Статьи</a>

    <a href="#">Контакты</a>

</div>

CSS:
.menu {

    display: flex;

    gap: 15px;

}

@media (max-width: 768px) {

    .menu {

        flex-direction: column;

    }

}

На широких экранах меню будет горизонтальным, а на мобильных устройствах — вертикальным.

Адаптивная сетка с Grid

Media Queries часто используются вместе с CSS Grid.

.container {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;

}

@media (max-width: 768px) {

    .container {

        grid-template-columns: 1fr;

    }

}

В данном примере количество колонок автоматически уменьшается до одной на небольших экранах.

Тег viewport

Для корректной адаптивности необходимо использовать специальный метатег:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Он сообщает браузеру, что ширина страницы должна соответствовать ширине устройства.

Без этого мобильные браузеры могут отображать страницу неправильно.

Практические рекомендации

При создании адаптивных сайтов рекомендуется:

• использовать Flexbox и Grid;
• избегать фиксированных размеров там, где это не требуется;
• применять относительные единицы измерения (%, rem, fr);
• тестировать сайт на разных устройствах;
• учитывать удобство взаимодействия на сенсорных экранах.

Адаптивная вёрстка является важной частью современной веб-разработки. Благодаря Media Queries разработчик может изменять внешний вид сайта в зависимости от размера экрана и обеспечивать удобное отображение интерфейса на любых устройствах. Использование адаптивных технологий позволяет создавать более гибкие, удобные и профессиональные веб-сайты, соответствующие современным требованиям интернета и ожиданиям пользователей.