Cómo probar HTML responsive

Comprueba columnas y media queries cambiando el ancho de la vista previa.

HTML CSS JS Compiler · Metodología · Contacto

Pasos

Empieza con la plantilla inicial o carga un proyecto de ejemplo.
Edita la estructura HTML, los estilos CSS y el comportamiento JavaScript.
Pulsa Ejecutar (Ctrl/Cmd + Enter) para actualizar la vista previa en sandbox.
Abre el panel de consola para leer logs, advertencias y errores.
Usa los controles responsivos para comprobar el diseño en anchos habituales.
Formatea, copia o descarga tu trabajo como index.html.

Ejemplo

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);

Las tarjetas forman tres columnas por encima de 600px y una columna hasta 600px. La simulación de ancho no sustituye las pruebas en dispositivos reales.

Consejo

La ejecución básica de HTML, CSS y JavaScript para la vista previa ocurre localmente en tu navegador.