- Cuarzo.dev
- Posts
- Cómo usar las MEDIA QUERIES en FLEXBOX CSS para crear layouts RESPONSIVE
Cómo usar las MEDIA QUERIES en FLEXBOX CSS para crear layouts RESPONSIVE
Aprende a usar media queries de CSS junto con Flexbox para crear diseños web responsivos. Tutorial paso a paso para programadores con ejemplos prácticos.
Kiko Palomares
January 28, 2021 • Lo lees en: 3 minutos
Cómo combinar Media Queries de CSS con Flexbox para diseños responsivos
En el mundo del diseño web, la responsividad es clave. Los usuarios acceden a sitios web desde una variedad de dispositivos con diferentes tamaños de pantalla. Para asegurar que tu diseño se vea bien en todos ellos, es esencial utilizar herramientas como Flexbox y media queries de CSS. Vamos a empezar creando un archivo HTML y añadiendo estilos CSS que se adapten a diferentes anchos de pantalla.
Paso 1: Configuración del entorno
Primero, abre tu editor de código, en este caso, Visual Studio Code. Crea un nuevo archivo llamado index.html e inicialízalo con HTML5. Cambia el título del documento a algo descriptivo, como "Flexbox".
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Reply