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

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

Пример адаптивной верстки

[su_pullquote]

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Адаптивная страница</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Пример адаптивной верстки</h1>
    </header>
    <main>
        <section>
            <p>Это пример текста, который будет адаптироваться под размер экрана.</p>
        </section>
    </main>
    <footer>
        <p>Контактная информация</p>
    </footer>
</body>
</html>

[/su_pullquote]

[su_pullquote]

/* Базовые стили */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header, footer {
    background-color: # 333;
    color: white;
    text-align: center;
    padding: 1em 0;
}

main {
    padding: 1em;
}

/* Стили для экранов шириной 600px и больше */
@media (min-width: 600px) {
    main {
        max-width: 600px;
        margin: 0 auto;
    }
}

/* Стили для экранов шириной 900px и больше */
@media (min-width: 900px) {
    main {
        max-width: 900px;
        margin: 0 auto;
    }
}

[/su_pullquote]

 

Как это работает

  1. HTML: Содержит структуру страницы с заголовком, основным содержимым и подвалом.
  2. CSS: Определяет базовые стили для всех устройств и добавляет медиа-запросы для изменения стилей в зависимости от ширины экрана.

Преимущества адаптивной верстки

  • Удобство для пользователей: Сайт выглядит хорошо на любом устройстве.
  • Улучшение SEO: Поисковые системы предпочитают адаптивные сайты.
  • Экономия времени и ресурсов: Нет необходимости создавать отдельные версии сайта для разных устройств.

Андрей К.

менеджер проектов

Наш сайт использует файлы cookie, сервисы веб-аналитики. Оставаясь на сайте, вы подтверждаете свое согласие на использование данных файлов.