KnowledgeDocs

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

1. Media Query

Что такое Media Query?

**Media Query** — это инструмент CSS, который позволяет применять стили в зависимости от характеристик устройства, таких как размер экрана, разрешение и ориентация.

Основные синтаксические конструкции

- **@media screen**: Применяет стили для экранов. - **@media print**: Применяет стили для печати. - **Условия**: - `min-width` и `max-width`: Минимальная и максимальная ширина устройства. - `orientation`: Ориентация экрана (`portrait` или `landscape`). - `prefers-color-scheme`: Предпочтения цветовой схемы (`dark`, `light`).

Пример использования

```css /* Стили для мобильных устройств */ @media (max-width: 768px) { .container { padding: 10px; } }

/* Стили для экранов с тёмной темой */ @media (prefers-color-scheme: dark) { body { background-color: #121212; color: #ffffff; } }

text


<h3 id="основные-вопросы">Основные вопросы</h3>
1. Как `min-width` и `max-width` влияют на приоритет стилей?
2. Чем отличаются `@media screen` и `@media all`?

---

<h2 id="2-адаптация-под-печать">2. Адаптация под печать</h2>

<h3 id="зачем-нужна-адаптация">Зачем нужна адаптация?</h3>
Адаптация под печать позволяет подготовить веб-страницу для вывода на принтер, убирая ненужные элементы и обеспечивая читаемость.

<h3 id="особенности-стилей-для-печати">Особенности стилей для печати</h3>
- Используется `@media print` для определения стилей.
- Обычно скрываются навигационные панели, фоны и анимации.

<h3 id="пример-стилей-для-печати">Пример стилей для печати</h3>
```css
@media print {
  body {
    font-size: 12pt;
    color: black;
    background: none;
  }

  .navigation, .footer {
    display: none;
  }
}

Основные вопросы

1. Какие элементы стоит скрывать в печатной версии? 2. Как настроить размеры шрифтов для печати?

3. Особенности разных платформ

Почему это важно?

Разные платформы (мобильные устройства, планшеты, десктопы) имеют свои особенности, которые нужно учитывать для обеспечения удобства пользователя.

Примеры особенностей

- **Мобильные устройства**: - Меньший размер экрана. - Частое использование тач-управления. - **Планшеты**: - Изменяемая ориентация экрана. - Больше пространства для отображения контента. - **Десктопы**: - Большие экраны и сложные интерфейсы. - Использование мыши и клавиатуры.

Пример адаптации под платформы

```css /* Стили для десктопов */ @media (min-width: 1024px) { .sidebar { display: block; } }

/* Стили для мобильных устройств */ @media (max-width: 768px) { .sidebar { display: none; } }