Загрузка...

Адаптивный HTML

После layout идёт адаптив: тот же URL на телефоне и десктопе. HTML начинает с viewport; CSS завершает.

Один URL, много ширин

Отдельный mobile HTML не нужен. Привычка 1200px даёт горизонтальный скролл.

Прямой ответ

1) meta viewport. 2) гибкие ширины. 3) img max-width:100%. Media queries — тема CSS.

📊 HTML unlocks vs CSS responsive tools

Layer	Job for responsiveness	Examples
HTML viewport	Tell mobile browsers how to size the layout viewport	meta name="viewport" with width=device-width
HTML structure	Keep landmarks and flexible wrappers that can reflow	header, main, aside, div.row (from layout)
CSS fluid sizing	Let boxes and images shrink instead of overflow	max-width, %, height: auto
CSS adaptation	Change columns and spacing at breakpoints	media queries, flex/grid tweaks (CSS courses)
Avoid	Huge fixed pixels and layout tables fighting narrow screens	width="1200", whole-page table chrome

Meta viewport — ключевой кусок HTML

Без него многие телефоны сжимают desktop-холст — текст крошечный.

Viewport meta in head

html

HTML Code

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive demo</title>
</head>

Читаем строку viewport

name=viewport — переключатель
width=device-width = ширина устройства
initial-scale=1.0 = 100%
CSS всё ещё нужен

Гибкие изображения — разметка HTML + масштаб CSS

img с alt; масштаб — CSS.

Fluid images helper

html

HTML Code

<style>
img { max-width: 100%; height: auto; }
</style>
<img src="images/wide.jpg" alt="Wide landscape photo">

Читаем гибкое правило

max-width:100%
height:auto сохраняет пропорции
width=1200 переполняет на телефоне

HTML открывает; CSS завершает

Viewport и гибкая структура — HTML. Гибкие колонки и breakpoints — CSS.

Практика — лаборатория resize

Добавьте viewport
Широкое изображение + гибкий CSS
Сузьте окно
Кратко проверьте width=1200

Частые ошибки

забыть viewport
фиксированные 1200px медиа
миф «только HTML»
layout-таблицы

Кратко

viewport обязателен
гибкие изображения помогают
HTML + CSS
далее: формы

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓

Вопросы

🎯

70%

Для Прохождения

♾️

∞

Время

🔄

∞

Попытки

📝 Инструкции

Внимательно прочитайте каждый вопрос
Выберите лучший ответ на каждый вопрос
Вы можете пересдавать тест столько раз, сколько захотите
Ваш прогресс будет показан вверху

Язык