6. Резиновая вёрстка (Fluid Layout)

Описание: Использование относительных единиц (%, vw/vh) вместо фиксированных (px).

Преимущества:

• Плавное масштабирование.

• Лучше подходит для разных экранов.

Недостатки:

• Может выглядеть "размыто" на очень больших экранах.

Пример:

css

Copy

Download

.container { width: 90%; }

.column { width: 30%; float: left; }

Когда использовать?

• В сочетании с адаптивной вёрсткой.

7. Фиксированная вёрстка (Static Layout)

Описание: Все размеры задаются в пикселях (px).

Преимущества:

• Полный контроль над дизайном.

• Предсказуемость.

Недостатки:

• Плохо масштабируется.

• Не подходит для мобильных устройств.

Когда использовать?

• Сайты с жёсткими требованиями к пиксель-перфекту.

• Устаревшие проекты.

8. Вёрстка с использованием css-фреймворков (Bootstrap, Tailwind, Foundation)

Описание: Готовые системы сеток и компонентов.

Преимущества:

• Быстрая разработка.

• Готовая адаптивность.

• Кросс-браузерность.

Недостатки:

• Лишний код, если используешь не всё.

• Ограничения кастомизации.

Когда использовать?

• Прототипирование.

• Корпоративные и небольшие проекты.

Вывод

Современная вёрстка чаще всего комбинирует:

• CSS Grid для сложных макетов,

• Flexbox для компонентов,

• Адаптивные медиазапросы для мобильных устройств,

• Относительные единицы для гибкости.

Табличная вёрстка устарела, фиксированная используется редко, а фреймворки помогают ускорить процесс. Выбор зависит от проекта! 🚀

Что такое и для чего применяются @media?

@media (медиазапросы) — это CSS-правила, которые позволяют применять стили в зависимости от характеристик устройства или условий отображения (ширина экрана, тип устройства, ориентация и т. д.).

Для чего применяются @media?

1. Адаптивный дизайн (Responsive Web Design, rwd)

   • Подстройка макета под разные размеры экранов (мобильные, планшеты, десктопы).

   • Пример: изменение количества колонок, скрытие/показ элементов.

2. Учёт особенностей устройства

   • Разные стили для печати (print), тёмной темы (prefers-color-scheme), ретина-экранов (resolution).

   • Пример: удаление фоновых изображений при печати.

3. Оптимизация пользовательского опыта

   • Улучшение читаемости на маленьких экранах (увеличение шрифтов, изменение отступов).

Синтаксис медиазапросов

css

Copy

Download

@media [тип устройства] [условия] {

/* Стили, которые применяются при выполнении условий */

}

Основные типы условий:

1. По ширине экрана (width, min-width, max-width)

css

Copy

Download

/* Стили для экранов шириной до 768px (мобильные) */

@media (max-width: 768px) {

.sidebar { display: none; }

.menu { font-size: 14px; }

}

2. По ориентации (orientation)

css

Copy

Download

/* Стили для альбомной ориентации */

@media (orientation: landscape) {

body { background: lightblue; }

}

3. Для печати (print)

css

Copy

Download

@media print {

.ads, .navbar { display: none; }

body { font-size: 12pt; }

}

4. Тёмная тема (prefers-color-scheme)

css

Copy

Download

@media (prefers-color-scheme: dark) {

body { background: #333; color: white; }

}

5. Высокопиксельные экраны (resolution)

css

Copy

Download

/* Стили для ретина-экранов */

@media (min-resolution: 2dppx) {

.logo { background-image: url("logo@2x.png"); }

}

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

css

Copy

Download

/* Базовые стили (для мобильных) */

.container {

width: 100%;

padding: 10px;

}

/* Планшеты (768px и больше) */

@media (min-width: 768px) {

.container {

width: 750px;

margin: 0 auto;

}

}

/* Десктопы (992px и больше) */

@media (min-width: 992px) {

.container {

width: 970px;

}

.sidebar { float: left; width: 30%; }

}

Лучшие практики

1. Mobile First Начинайте с стилей для мобильных (max-width), затем добавляйте условия для больших экранов (min-width).

2. Используйте относительные единицы %, vw, rem вместо px для гибкости.

3. Тестируйте на реальных устройствах Chrome DevTools (Ctrl+Shift+M) имитирует разные разрешения, но реальные телефоны/планшеты могут вести себя иначе.

4. Не злоупотребляйте количеством @media Оптимально 3-5 точек перелома (например: 576px, 768px, 992px, 1200px — как в Bootstrap).

Вывод

@media — ключевой инструмент для создания адаптивных, удобных и технологически продвинутых сайтов. Они позволяют:

• Делать макет гибким под любые устройства.

• Улучшать UX (например, скрывать лишнее на мобильных).

• Поддерживать специальные режимы (печать, тёмная тема).

Без медиазапросов современный веб был бы статичным и недружелюбным к пользователям! 📱💻🖥️

Как работают @media?

Как работают медиазапросы @media в CSS?

Медиазапросы (@media) — это механизм в CSS, который позволяет применять стили только при выполнении определённых условий (например, ширина экрана, тип устройства, ориентация). Они работают на основе условной логики: браузер проверяет параметры устройства и решает, нужно ли применять указанные стили.

1. Принцип работы @media

Когда браузер загружает страницу, он:

1. Анализирует CSS-код, включая медиазапросы.

2. Определяет характеристики устройства (размер окна, плотность пикселей, ориентацию и т. д.).

3. Проверяет условия внутри @media:

   • Если условие истинно (true), стили применяются.

   • Если ложно (false), стили игнорируются.

4. Динамически обновляет стили при изменении условий (например, при повороте экрана или изменении размера окна).