Saltar al contenido

Diseño Web Responsive HTML

septiembre 23, 2021
img temp band

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.


Diseño web adaptable

¿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:
img viewport1

Con la metaetiqueta de la ventana gráfica:
img viewport2

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á:

img girl

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:

img girl


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:

Flores

Ejemplo





Flores

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.

close