El diseño web receptivo consiste en crear páginas web que se vean bien en todos los dispositivos.
Un diseño web receptivo se ajustará automáticamente a diferentes tamaños de pantalla y ventanas gráficas.
¿Qué es el diseño web adaptable?
El diseño web receptivo se trata de usar HTML y CSS para cambiar el tamaño, ocultar, reducir o agrandar automáticamente un sitio web, para que se vea bien en todos los dispositivos (computadoras de escritorio, tabletas y teléfonos):
Inténtalo tú mismo »
Configuración de la ventana gráfica
Para crear un sitio web receptivo, agregue lo siguiente <meta>
etiquetar a todas sus páginas web:
Ejemplo
Inténtalo tú mismo »
Esto establecerá la ventana gráfica de su página, que le dará al navegador instrucciones sobre cómo controlar las dimensiones y la escala de la página.
Aquí hay un ejemplo de una página web. sin la metaetiqueta de la ventana gráfica y la misma página web con la metaetiqueta de la ventana gráfica:
Sin la metaetiqueta de la ventana gráfica:
Con la metaetiqueta de la ventana gráfica:
Propina: Si está navegando por esta página en un teléfono o tableta, puede hacer clic en los dos enlaces de arriba para ver la diferencia.
Imágenes receptivas
Las imágenes receptivas son imágenes que se escalan bien para adaptarse a cualquier tamaño de navegador.
Usando la propiedad de ancho
Si el CSS width se establece en 100%, la imagen responderá y se ampliará y reducirá:
Observe que en el ejemplo anterior, la imagen se puede escalar para que sea más grande que su tamaño original. Una mejor solución, en muchos casos, será utilizar el max-width propiedad en su lugar.
Usando la propiedad de ancho máximo
Si el max-width se establece en 100%, la imagen se reducirá si es necesario, pero nunca se ampliará para que sea más grande que su tamaño original:
Mostrar diferentes imágenes según el ancho del navegador
El HTML <picture> El elemento le permite definir diferentes imágenes para diferentes tamaños de ventana del navegador.
Cambie el tamaño de la ventana del navegador para ver cómo cambia la imagen de abajo según el ancho:
Ejemplo
Inténtalo tú mismo »
Tamaño de texto adaptable
El tamaño del texto se puede configurar con una unidad «vw», que significa el «ancho de la ventana gráfica».
De esa forma, el tamaño del texto seguirá el tamaño de la ventana del navegador:
Cambie el tamaño de la ventana del navegador para ver cómo se escala el tamaño del texto.
Viewport es el tamaño de la ventana del navegador. 1vw = 1% del ancho de la ventana gráfica. Si la ventana tiene 50 cm de ancho, 1 vw es 0,5 cm.
Preguntas de los medios
Además de cambiar el tamaño del texto y las imágenes, también es común utilizar consultas de medios en páginas web receptivas.
Con las consultas de medios, puede definir estilos completamente diferentes para diferentes tamaños de navegador.
Ejemplo: cambie el tamaño de la ventana del navegador para ver que los tres elementos div a continuación se mostrarán horizontalmente en pantallas grandes y apilados verticalmente en pantallas pequeñas:
Ejemplo
.izquierda derecha {
flotador izquierdo;
ancho: 20%; / * El ancho es 20%, por defecto * /
}
.principal {
flotador izquierdo;
ancho: 60%; / * El ancho es 60%, por defecto * /
}
/ * Use una consulta de medios para agregar un punto de interrupción en 800px: * /
@media pantalla y (ancho máximo: 800px) {
.izquierda, .main, .right {
ancho: 100%; / * El ancho es 100%, cuando la ventana gráfica es de 800px o menos * /
}
}
Inténtalo tú mismo »
Propina: Para obtener más información sobre las consultas de medios y el diseño web receptivo, lea nuestro tutorial de RWD.
Página web receptiva: ejemplo completo
Una página web receptiva debería verse bien en pantallas de escritorio grandes y en teléfonos móviles pequeños.
Inténtalo tú mismo »
Diseño web adaptable – Frameworks
Todos los marcos CSS populares ofrecen un diseño receptivo.
Son gratis y fáciles de usar.
W3.CSS
W3.CSS es un marco CSS moderno con soporte para escritorio, tableta y diseño móvil de forma predeterminada.
W3.CSS es más pequeño y más rápido que marcos CSS similares.
W3.CSS está diseñado para ser una alternativa de alta calidad a Bootstrap.
W3.CSS está diseñado para ser independiente de jQuery o de cualquier otra biblioteca de JavaScript.
¡Cambie el tamaño de la página para ver la capacidad de respuesta!
Londres
Londres es la capital de Inglaterra.
Es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 13 millones de habitantes.
París
París es la capital de Francia.
El área de París es uno de los núcleos de población más grandes de Europa, con más de 12 millones de habitantes.
Tokio
Tokio es la capital de Japón.
Es el centro del área metropolitana de Tokio y el área metropolitana más poblada del mundo.
Ejemplo
Demostración de W3Schools
¡Cambie el tamaño de esta página adaptable!
Londres
Londres es la capital de Inglaterra.
Es la ciudad más poblada del Reino Unido,
con un área metropolitana de más de 13 millones de habitantes.
París
París es la capital de Francia.
El área de París es uno de los centros de población más grandes de Europa,
con más de 12 millones de habitantes.
Tokio
Tokio es la capital de Japón.
Es el centro del área metropolitana de Tokio,
y el área metropolitana más poblada del mundo.