CSS
Tutorial CSS: Fundamentos del Diseño Responsive
Aprende los principios del diseño responsive, viewport y diferencias entre mobile-first y desktop-first para crear webs adaptables y accesibles.
Aprende CSS y certifícateConcepto de diseño adaptable y necesidad en múltiples dispositivos
El diseño adaptable (o responsive design) es una aproximación al desarrollo web que busca que las páginas se visualicen correctamente en diferentes dispositivos y tamaños de pantalla. En lugar de crear versiones separadas de un sitio para cada dispositivo, el diseño adaptable permite que una sola versión del sitio se ajuste automáticamente a las dimensiones de la pantalla donde se visualiza.
La proliferación de dispositivos con acceso a internet ha transformado radicalmente la forma en que consumimos contenido web. Ya no navegamos exclusivamente desde ordenadores de escritorio con pantallas de tamaño estándar. Hoy en día, los usuarios acceden a la web desde smartphones, tablets, portátiles, monitores ultrawide e incluso dispositivos wearables, cada uno con diferentes resoluciones y proporciones de pantalla.
Fundamentos del diseño adaptable
El diseño adaptable se basa en tres componentes técnicos principales:
Layouts fluidos: Utilizan unidades relativas (como porcentajes) en lugar de unidades fijas (como píxeles) para permitir que los elementos se redimensionen proporcionalmente.
Imágenes flexibles: Se ajustan automáticamente para no desbordar sus contenedores cuando la pantalla cambia de tamaño.
Media queries: Permiten aplicar diferentes estilos CSS según las características del dispositivo, principalmente el ancho de la pantalla.
¿Por qué es necesario el diseño adaptable?
Diversidad de dispositivos
La fragmentación del mercado de dispositivos hace imposible diseñar para un solo tamaño de pantalla. Observemos algunos datos que ilustran esta realidad:
/* Ejemplo de rangos comunes de anchura de dispositivos */
/* Smartphones (portrait): 320px - 480px */
/* Smartphones (landscape): 481px - 767px */
/* Tablets (portrait): 768px - 1024px */
/* Desktops/Laptops: 1025px - 1280px */
/* Large screens: 1281px y superiores */
Experiencia de usuario mejorada
Un diseño que se adapta correctamente proporciona una experiencia coherente independientemente del dispositivo utilizado. Los usuarios esperan poder navegar cómodamente sin necesidad de hacer zoom o desplazarse horizontalmente para leer el contenido.
/* CSS básico para mejorar la experiencia en dispositivos móviles */
body {
max-width: 100%;
overflow-x: hidden; /* Evita el scroll horizontal */
}
img {
max-width: 100%; /* Imágenes responsivas */
height: auto;
}
Impacto en SEO y rendimiento
Los motores de búsqueda como Google priorizan los sitios web adaptables en sus resultados de búsqueda móvil. Desde 2018, Google implementó la indexación "mobile-first", lo que significa que principalmente utiliza la versión móvil del contenido para indexar y clasificar.
Mantenimiento simplificado
Mantener un único sitio web adaptable es más eficiente que gestionar múltiples versiones para diferentes dispositivos:
/* En lugar de tener archivos separados para cada dispositivo */
/* desktop.css, tablet.css, mobile.css */
/* Podemos tener un único archivo con media queries */
.container {
width: 90%;
margin: 0 auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
Principios de diseño adaptable
Flexibilidad en el layout
Los layouts fluidos son la base del diseño adaptable. En lugar de definir anchos fijos en píxeles, utilizamos unidades relativas:
/* Enfoque no adaptable (fijo) */
.container {
width: 960px;
}
/* Enfoque adaptable (fluido) */
.container {
width: 90%;
max-width: 1200px;
}
Imágenes y medios adaptables
Las imágenes deben ajustarse automáticamente al tamaño de su contenedor:
img {
max-width: 100%;
height: auto;
}
Para casos más complejos, podemos utilizar la propiedad object-fit
:
.hero-image {
width: 100%;
height: 300px;
object-fit: cover; /* Mantiene la proporción recortando si es necesario */
}
Tipografía fluida
El tamaño de texto también debe adaptarse a diferentes pantallas. Podemos usar unidades relativas como em
o rem
:
body {
font-size: 16px; /* Base para cálculos rem */
}
h1 {
font-size: 2rem; /* 32px en tamaño base */
}
@media (max-width: 768px) {
h1 {
font-size: 1.5rem; /* 24px en tamaño base */
}
}
O utilizar la función clamp()
para una tipografía verdaderamente fluida:
h1 {
font-size: clamp(1.5rem, 5vw, 2.5rem);
/* Mínimo 1.5rem, preferido 5% del viewport, máximo 2.5rem */
}
Beneficios del diseño adaptable
Alcance universal
Un sitio adaptable es accesible para todos los usuarios, independientemente del dispositivo que utilicen. Esto amplía significativamente el alcance potencial de tu contenido.
Mejor experiencia de usuario
Los usuarios pueden navegar cómodamente sin frustraciones como:
- Hacer zoom constante
- Desplazamiento horizontal
- Botones o enlaces demasiado pequeños para tocar
- Textos ilegibles
Preparación para el futuro
El diseño adaptable es flexible por naturaleza, lo que significa que tu sitio estará mejor preparado para adaptarse a nuevos dispositivos y tamaños de pantalla que puedan surgir en el futuro.
Ventaja competitiva
En un mercado digital altamente competitivo, ofrecer una experiencia óptima en todos los dispositivos puede marcar la diferencia entre retener a un usuario o perderlo frente a la competencia.
Consideraciones de implementación
Al implementar un diseño adaptable, es importante considerar:
- Rendimiento: Los sitios adaptables deben cargar rápidamente en todos los dispositivos, incluso en conexiones móviles más lentas.
/* Ejemplo: Cargar imágenes más pequeñas en dispositivos móviles */
.background {
background-image: url('small-image.jpg');
}
@media (min-width: 768px) {
.background {
background-image: url('large-image.jpg');
}
}
- Navegación: Los menús deben adaptarse a pantallas pequeñas, generalmente transformándose en menús tipo "hamburguesa".
/* Menú de navegación adaptable básico */
.nav-menu {
display: flex;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.nav-menu {
flex-direction: column;
}
}
- Contenido prioritario: En pantallas más pequeñas, es crucial mostrar primero el contenido más importante.
El diseño adaptable no es simplemente una tendencia pasajera, sino una necesidad fundamental en el desarrollo web moderno. Comprender sus principios y aplicarlos correctamente te permitirá crear experiencias web que funcionen bien para todos los usuarios, independientemente del dispositivo que utilicen para acceder a tu contenido.
Viewport y meta tag viewport para dispositivos móviles
El viewport es un concepto fundamental para el diseño web adaptable. Representa el área visible de una página web en el dispositivo del usuario. Comprender cómo funciona el viewport es esencial para crear sitios que se visualicen correctamente en dispositivos móviles.
¿Qué es el viewport?
En términos simples, el viewport es la ventana a través de la cual los usuarios ven tu sitio web. En un ordenador de escritorio, el viewport es el área visible del navegador (excluyendo barras de herramientas y otros elementos de la interfaz). En dispositivos móviles, la situación es más compleja.
Antes de que existieran las técnicas de diseño responsive, los sitios web estaban diseñados principalmente para pantallas de escritorio. Cuando los smartphones comenzaron a popularizarse, sus navegadores adoptaron una solución provisional: renderizar las páginas como si estuvieran en una pantalla de escritorio y luego reducir la escala para que cupieran en la pantalla del dispositivo.
/* Sin configuración de viewport, un contenedor de 980px
se vería muy pequeño en un móvil de 375px de ancho */
.container {
width: 980px;
margin: 0 auto;
}
Esta solución permitía ver el sitio completo, pero con un problema evidente: todo se veía diminuto. Los usuarios tenían que hacer zoom constantemente para leer el contenido, lo que resultaba en una experiencia frustrante.
El meta tag viewport
Para solucionar este problema, Apple introdujo en Safari para iOS el meta tag viewport, que posteriormente fue adoptado por todos los navegadores móviles. Esta etiqueta permite a los desarrolladores controlar cómo se comporta el viewport en dispositivos móviles.
La implementación básica del meta tag viewport se ve así:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esta línea de código, que se coloca en la sección <head>
del documento HTML, indica al navegador que:
width=device-width
: El ancho del viewport debe ser igual al ancho del dispositivoinitial-scale=1.0
: El nivel de zoom inicial debe ser 1 (sin zoom)
Propiedades del meta tag viewport
El atributo content
del meta tag viewport puede incluir varias propiedades separadas por comas:
width: Define el ancho del viewport
width=device-width
: Usa el ancho del dispositivowidth=600
: Establece un ancho fijo en píxeles (no recomendado para diseño responsive)initial-scale: Define el nivel de zoom inicial
initial-scale=1.0
: Sin zoominitial-scale=2.0
: Zoom de 2xminimum-scale: Establece el nivel mínimo de zoom permitido
minimum-scale=0.5
: Permite reducir hasta la mitad del tamañomaximum-scale: Establece el nivel máximo de zoom permitido
maximum-scale=3.0
: Permite aumentar hasta 3 veces el tamañouser-scalable: Controla si el usuario puede hacer zoom
user-scalable=yes
: Permite zoom (recomendado)user-scalable=no
: Desactiva el zoom (no recomendado por razones de accesibilidad)
Configuraciones comunes del viewport
La configuración más utilizada y recomendada es:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esta configuración permite que el sitio se adapte al ancho del dispositivo y comience sin zoom, lo que proporciona una buena base para el diseño responsive.
Para sitios que requieren consideraciones especiales de accesibilidad, puedes usar:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
Esta configuración permite a los usuarios hacer zoom hasta 5x si lo necesitan, lo que es útil para personas con problemas de visión.
Impacto del viewport en CSS
Una vez configurado correctamente el meta tag viewport, el CSS se interpretará en relación con el ancho real del dispositivo. Esto permite que las media queries funcionen como se espera:
/* Este estilo se aplicará cuando el viewport sea menor a 768px */
@media (max-width: 768px) {
.container {
padding: 10px;
}
}
Sin el meta tag viewport adecuado, estas media queries podrían no activarse correctamente en dispositivos móviles, ya que el navegador estaría simulando una pantalla más grande.
Unidades relativas al viewport
CSS ofrece unidades específicamente diseñadas para trabajar con el viewport:
- vw (viewport width): 1vw equivale al 1% del ancho del viewport
- vh (viewport height): 1vh equivale al 1% del alto del viewport
- vmin: 1vmin equivale al 1% de la dimensión más pequeña (ancho o alto)
- vmax: 1vmax equivale al 1% de la dimensión más grande (ancho o alto)
Estas unidades son extremadamente útiles para crear diseños que se escalen proporcionalmente con el tamaño de la pantalla:
.hero {
height: 50vh; /* Ocupa la mitad de la altura del viewport */
font-size: 5vw; /* El tamaño del texto es el 5% del ancho del viewport */
}
.square {
width: 50vmin; /* Siempre será cuadrado, usando la dimensión más pequeña */
height: 50vmin;
}
Problemas comunes con el viewport
Contenido que desborda el viewport
Un problema frecuente es el contenido que se extiende más allá del ancho del viewport, causando scroll horizontal:
/* Solución para evitar desbordamiento horizontal */
body {
max-width: 100%;
overflow-x: hidden;
}
img, video, iframe {
max-width: 100%;
height: auto;
}
Elementos fijos que ocupan demasiado espacio
Los elementos con position: fixed
pueden ocupar demasiado espacio en pantallas pequeñas:
/* Ajustar elementos fijos según el tamaño de pantalla */
.fixed-header {
position: fixed;
width: 100%;
height: 60px;
}
@media (max-width: 480px) {
.fixed-header {
height: 40px; /* Más compacto en móviles */
}
body {
padding-top: 40px; /* Compensar el espacio del header */
}
}
Teclado virtual que reduce el viewport
En dispositivos móviles, cuando aparece el teclado virtual, el tamaño efectivo del viewport se reduce. Esto puede causar problemas con elementos posicionados absolutamente:
/* Para formularios en móviles */
@media (max-width: 768px) {
.form-container {
position: relative; /* En lugar de fixed o absolute */
padding-bottom: 20vh; /* Espacio para el teclado */
}
}
Pruebas del viewport
Es esencial probar cómo se comporta tu sitio con diferentes configuraciones de viewport. Los navegadores modernos incluyen herramientas de desarrollo que permiten simular diferentes dispositivos:
- Chrome DevTools: Incluye un modo de dispositivo que simula varios smartphones y tablets
- Firefox Responsive Design Mode: Similar a Chrome, permite probar diferentes tamaños de pantalla
- Safari Responsive Design Mode: Disponible en la versión para macOS
Estas herramientas te permiten verificar cómo se comporta tu sitio con diferentes tamaños de viewport sin necesidad de tener físicamente todos esos dispositivos.
Buenas prácticas para el viewport
- Siempre incluye el meta tag viewport en todas tus páginas web
- No desactives el zoom del usuario (
user-scalable=no
), ya que afecta negativamente a la accesibilidad - Prueba tu sitio en múltiples dispositivos reales cuando sea posible, no solo en emuladores
- Utiliza unidades relativas (%, em, rem, vw, vh) en lugar de unidades absolutas (px) para crear layouts flexibles
- Considera la orientación del dispositivo (portrait vs landscape) en tus diseños
El meta tag viewport es un componente pequeño pero crucial para el diseño web responsive. Configurarlo correctamente establece la base para que todas tus técnicas de CSS responsive funcionen como se espera, proporcionando a los usuarios una experiencia óptima independientemente del dispositivo que utilicen.
Enfoque mobile-first vs desktop-first
En el diseño web responsive, existen dos metodologías principales para abordar el desarrollo: mobile-first y desktop-first. Cada enfoque representa una filosofía diferente sobre cómo estructurar y escribir tu CSS, y la elección entre uno u otro puede impactar significativamente en la eficiencia del desarrollo y la experiencia del usuario final.
Mobile-first: diseñando desde lo pequeño
El enfoque mobile-first consiste en diseñar primero para dispositivos móviles y luego ir adaptando progresivamente el diseño para pantallas más grandes. Técnicamente, esto significa escribir tu CSS base para móviles y usar media queries con min-width
para ir añadiendo estilos a medida que la pantalla crece.
/* Estilos base para móviles */
.container {
width: 100%;
padding: 10px;
}
/* Adaptación para tablets */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
padding: 20px;
}
}
/* Adaptación para escritorio */
@media (min-width: 1024px) {
.container {
width: 980px;
padding: 30px;
}
}
En este ejemplo, comenzamos con un estilo básico para móviles y vamos añadiendo complejidad a medida que aumenta el tamaño de la pantalla.
Desktop-first: del escritorio hacia abajo
Por otro lado, el enfoque desktop-first comienza con el diseño para pantallas grandes y luego va simplificando para dispositivos más pequeños. En este caso, se utilizan media queries con max-width
para ir reduciendo y adaptando elementos.
/* Estilos base para escritorio */
.container {
width: 980px;
margin: 0 auto;
padding: 30px;
}
/* Adaptación para tablets */
@media (max-width: 1023px) {
.container {
width: 750px;
padding: 20px;
}
}
/* Adaptación para móviles */
@media (max-width: 767px) {
.container {
width: 100%;
padding: 10px;
}
}
Aquí partimos de un diseño completo para escritorio y vamos simplificándolo para pantallas más pequeñas.
Comparativa de enfoques
Ventajas del mobile-first
Prioriza el rendimiento: Al comenzar con lo mínimo necesario, los dispositivos móviles cargan solo el CSS esencial, mejorando la velocidad.
Fuerza la simplificación: Te obliga a identificar el contenido y funcionalidades realmente importantes.
/* Ejemplo de simplificación mobile-first */
.navigation {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.navigation {
flex-direction: row;
justify-content: space-between;
}
}
Alineado con tendencias de uso: Reconoce la realidad de que la mayoría del tráfico web proviene de dispositivos móviles.
Progresive enhancement: Sigue el principio de mejora progresiva, asegurando que la experiencia básica funcione para todos los usuarios.
Ventajas del desktop-first
Más intuitivo para diseños complejos: Puede ser más fácil comenzar con todas las funcionalidades y luego simplificar.
Aprovecha pantallas grandes: Permite explotar al máximo las capacidades de las pantallas de escritorio sin restricciones iniciales.
/* Ejemplo de diseño rico para escritorio */
.dashboard {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 1023px) {
.dashboard {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.dashboard {
grid-template-columns: 1fr;
}
}
- Familiar para proyectos legacy: Si estás adaptando un sitio existente que no era responsive, este enfoque puede ser más directo.
Implementación práctica
Mobile-first en acción
Veamos un ejemplo más completo de implementación mobile-first para un componente de tarjeta:
/* Estilos base (móvil) */
.card {
border: 1px solid #ddd;
border-radius: 4px;
padding: 15px;
margin-bottom: 15px;
}
.card-image {
width: 100%;
height: auto;
margin-bottom: 10px;
}
.card-content {
font-size: 0.9rem;
}
/* Tablets */
@media (min-width: 768px) {
.card {
padding: 20px;
display: flex;
align-items: center;
}
.card-image {
width: 30%;
margin-bottom: 0;
margin-right: 20px;
}
.card-content {
font-size: 1rem;
}
}
/* Escritorio */
@media (min-width: 1024px) {
.card {
padding: 25px;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
}
Este ejemplo muestra cómo vamos añadiendo complejidad y refinamiento a medida que aumenta el tamaño de pantalla.
Desktop-first en acción
Ahora veamos el mismo componente con enfoque desktop-first:
/* Estilos base (escritorio) */
.card {
border: 1px solid #ddd;
border-radius: 4px;
padding: 25px;
margin-bottom: 20px;
display: flex;
align-items: center;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.card-image {
width: 30%;
margin-right: 20px;
}
.card-content {
font-size: 1rem;
}
/* Tablets */
@media (max-width: 1023px) {
.card {
padding: 20px;
}
.card:hover {
transform: none;
box-shadow: none;
}
}
/* Móvil */
@media (max-width: 767px) {
.card {
padding: 15px;
display: block;
}
.card-image {
width: 100%;
margin-right: 0;
margin-bottom: 10px;
}
.card-content {
font-size: 0.9rem;
}
}
Aquí comenzamos con todas las características y vamos simplificando para pantallas más pequeñas.
Consideraciones técnicas importantes
Orden de las media queries
El orden de las media queries es crucial en ambos enfoques:
- Mobile-first: Las media queries deben ordenarse de menor a mayor (
min-width
). - Desktop-first: Las media queries deben ordenarse de mayor a menor (
max-width
).
Un orden incorrecto puede causar que los estilos se sobrescriban de manera inesperada.
Puntos de ruptura (breakpoints)
Es recomendable establecer puntos de ruptura consistentes basados en el contenido, no en dispositivos específicos:
/* Ejemplo de breakpoints comunes */
@media (min-width: 576px) { /* Móviles grandes */ }
@media (min-width: 768px) { /* Tablets */ }
@media (min-width: 992px) { /* Laptops/Desktops pequeños */ }
@media (min-width: 1200px) { /* Desktops grandes */ }
Mixins para facilitar el trabajo
Si utilizas preprocesadores como Sass, puedes crear mixins para simplificar el uso de media queries:
// Mixins para mobile-first
@mixin tablet {
@media (min-width: 768px) { @content; }
}
@mixin desktop {
@media (min-width: 992px) { @content; }
}
// Uso
.element {
width: 100%;
@include tablet {
width: 50%;
}
@include desktop {
width: 33.33%;
}
}
Enfoque híbrido: lo mejor de ambos mundos
En la práctica, muchos desarrolladores adoptan un enfoque híbrido, utilizando mobile-first para la estructura general y desktop-first para componentes específicos que requieren más complejidad en pantallas grandes.
/* Estructura general (mobile-first) */
.main-layout {
display: flex;
flex-direction: column;
}
@media (min-width: 992px) {
.main-layout {
flex-direction: row;
}
}
/* Componente específico (desktop-first) */
.data-visualization {
display: none; /* Oculto en móvil */
}
@media (min-width: 992px) {
.data-visualization {
display: block;
/* Estilos complejos para visualización de datos */
}
}
¿Cuál elegir?
La elección entre mobile-first y desktop-first depende de varios factores:
Audiencia objetivo: Si la mayoría de tus usuarios acceden desde móviles, mobile-first tiene más sentido.
Complejidad del diseño: Para interfaces muy ricas en funcionalidades, desktop-first puede ser más intuitivo inicialmente.
Rendimiento: Si el rendimiento en dispositivos móviles es crítico, mobile-first ofrece ventajas claras.
Equipo y flujo de trabajo: Considera cómo trabajan tus diseñadores y desarrolladores, y qué enfoque se alinea mejor con su proceso.
Consejos prácticos para implementación
Planifica antes de codificar: Define tus breakpoints y la estrategia general antes de empezar.
Usa herramientas de desarrollo: Las herramientas de desarrollo de los navegadores permiten simular diferentes tamaños de pantalla.
Prueba en dispositivos reales: Las simulaciones son útiles, pero nada sustituye las pruebas en dispositivos reales.
Mantén la consistencia: Una vez que elijas un enfoque, mantenlo consistente en todo el proyecto.
Documenta tu enfoque: Especialmente en equipos, documenta claramente qué enfoque estás utilizando y por qué.
El enfoque mobile-first se ha convertido en la práctica recomendada en la industria debido al creciente uso de dispositivos móviles, pero ambas metodologías tienen su lugar dependiendo del contexto específico de cada proyecto. Lo más importante es elegir conscientemente y aplicar el enfoque de manera consistente.
Ejercicios de esta lección Fundamentos del Diseño Responsive
Evalúa tus conocimientos de esta lección Fundamentos del Diseño Responsive con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Reto modelo caja CSS
Propiedades de posicionamiento
Modelo de caja
Sombras en texto y cajas
Reto implementación de fuentes web
Sintaxis básica
Estilos de fuente
Diseño responsive con media queries
Animaciones y transiciones
Proyecto CSS Landing page simple
Reto unidades de medida
Propiedades de texto
Metodologías BEM, SMACSS, OOCSS
Herencia y cascada
Sintaxis avanzada
Reto fondos background CSS
Reto sintaxis CSS
Flexbox en diseños modernos
Elementos 'float' y 'clear'
Pseudo-clases y pseudo-elementos
Reto grid de columnas en CSS
Selectores avanzados
Reto componente responsive
Reto formulario estilizado
Proyecto CSS crear una navbar
Proyecto CSS Dashboard Responsive
Reto Flexbox Hero
Propiedades de fondo
Introducción a CSS
Reto selectores básicos CSS
Reto Flexbox Card
Reto propiedades texto
Modelo de caja
Propiedad 'display'
Variables en CSS
Grid en diseños de cuadrícula
Selectores básicos
Reto tema claro/oscuro con variables
Reto especificidad y cascada
Todas las lecciones de CSS
Accede a todas las lecciones de CSS y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Css
Introducción Y Entorno
Entorno Para Desarrollar Css
Introducción Y Entorno
Sintaxis
Sintaxis De Selectores Y Propiedades
Selectores Básicos
Sintaxis De Selectores Y Propiedades
Herencia Y Cascada
Sintaxis De Selectores Y Propiedades
Pseudo-clases Y Pseudo-elementos
Sintaxis De Selectores Y Propiedades
Colores En Css
Sintaxis De Selectores Y Propiedades
Unidades De Medida
Sintaxis De Selectores Y Propiedades
Especificidad
Sintaxis De Selectores Y Propiedades
Estilos De Fuente
Estilización De Texto Y Fondo
Propiedades De Texto
Estilización De Texto Y Fondo
Sombras En Texto Y Cajas
Estilización De Texto Y Fondo
Propiedades De Fondo
Estilización De Texto Y Fondo
Fuentes Web
Estilización De Texto Y Fondo
Efectos De Texto: Gradientes, Recortes
Estilización De Texto Y Fondo
Tipografía Avanzada
Estilización De Texto Y Fondo
Modelo De Caja
Modelo Caja
Propiedades De Posicionamiento
Modelo Caja
Propiedad 'Display'
Modelo Caja
Elementos 'Float' Y 'Clear'
Modelo Caja
Rellenos Y Márgenes
Modelo Caja
Bordes Y Contornos
Modelo Caja
Absolute, Fixed, Sticky Y Z-index
Posicionamiento
Flexbox Para Crear Layouts Y Estructuras
Flexbox
Css Grid Para Crear Layouts Y Estructuras
Flexbox
Propiedades Del Contenedor Flex
Flexbox
Propiedades De Los Items Flex
Flexbox
Columnas Y Filas En Grid
Css Grid
Espaciado Y Alineación
Css Grid
Tipografía Responsive
Diseño Responsive
Fundamentos Del Diseño Responsive
Diseño Responsive
Imágenes Responsive
Diseño Responsive
Funciones Matemáticas
Variables Y Funciones Css
Transformaciones 2d
Transformación, Transición, Animación
Transformaciones 3d
Transformación, Transición, Animación
Animaciones
Transformación, Transición, Animación
Transiciones
Transformación, Transición, Animación
Css Para Formularios
Css Avanzado
Accesibilidad Web Con Css
Css Avanzado
Container Queries
Css Avanzado
Selectores Avanzados
Css Avanzado
Animaciones Y Transiciones
Técnicas Modernas Y Metodologías
Variables En Css
Técnicas Modernas Y Metodologías
Diseño Responsive Con Media Queries
Técnicas Modernas Y Metodologías
Metodologías De Escritura En Css
Técnicas Modernas Y Metodologías
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender el concepto y la importancia del diseño adaptable en el desarrollo web.
- Identificar los componentes técnicos clave del diseño responsive: layouts fluidos, imágenes flexibles y media queries.
- Entender el papel del meta tag viewport y cómo afecta la visualización en dispositivos móviles.
- Diferenciar entre los enfoques mobile-first y desktop-first en la implementación de estilos CSS.
- Aplicar buenas prácticas para crear sitios web accesibles, eficientes y preparados para diversos dispositivos y tamaños de pantalla.