Проверка адаптивного HTML

Проверяйте колонки и медиазапросы при разной ширине предпросмотра.

HTML CSS JS Compiler · Методология · Контакты

Шаги

Начните с стартового шаблона или загрузите пример проекта.
Редактируйте структуру HTML, стили CSS и поведение JavaScript.
Нажмите «Запуск» (Ctrl/Cmd + Enter), чтобы обновить sandbox-предпросмотр.
Откройте панель console для просмотра log, warn и error.
Используйте адаптивные элементы управления для проверки вёрстки на типичных ширинах.
Форматируйте, копируйте или скачивайте работу как index.html.

Пример

HTML

<main class="cards"><article>A</article><article>B</article><article>C</article></main>

CSS

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cards article { padding: 24px; background: #dbeafe; }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

JavaScript

console.log("Preview width:", window.innerWidth);

При ширине более 600px карточки занимают три колонки, до 600px — одну. Такая проверка не заменяет тесты на реальных устройствах.

Совет

Базовое выполнение HTML, CSS и JavaScript для предпросмотра происходит локально в вашем браузере.