Saltar a contenido

Diseño web adaptable

Concepto

Un diseño para todos.

Método

Permitir el ajuste automático del ancho de la página

Agregar al inicio del código de la página:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Esta línea de código se incluye en el marco HTML5 generado automáticamente.

No utilizar anchos absolutos

Usar width: xx%; o width: auto; en lugar de width: xxx px;

Utilizar fuentes de tamaño relativo

Especificar el tamaño de la fuente como el 100% del tamaño predeterminado de la página, es decir, 16 píxeles:

body { font: normal 100% Helvetica, Arial, sans-serif; }

Luego, especificar el tamaño de h1 como 1.5 veces el tamaño predeterminado, es decir, 24 píxeles:

h1 { font-size: 1.5em; }

Diseño fluido (fluid grid)

Las posiciones de los bloques son flotantes, no fijas.

.main {
    float: right;
    width: 70%;
}

.leftBar {
    float: left;
    width: 25%;
}

Float tiene la ventaja de que si el ancho es demasiado pequeño para contener dos elementos, el elemento posterior se desplazará automáticamente debajo del elemento anterior en lugar de desbordar horizontalmente, evitando la aparición de barras de desplazamiento horizontales.

Evitar el uso de posicionamiento absoluto (position: absolute) en la medida de lo posible.

Cargar CSS selectivamente

Si el ancho de la pantalla es menor a 400 píxeles (max-device-width: 400px), cargar el archivo tinyScreen.css:

<link rel="stylesheet" type="text/css"
　　　　media="screen and (max-device-width: 400px)"
　　　　href="tinyScreen.css" />

Si el ancho de la pantalla está entre 400 y 600 píxeles, cargar el archivo smallScreen.css:

<link rel="stylesheet" type="text/css"
　　　　media="screen and (min-width: 400px) and (max-device-width: 600px)"
　　　　href="smallScreen.css" />

Imágenes adaptables (fluid image)

img { max-width: 100%;}

Referencias y agradecimientos

Dirección original del artículo: https://wiki-power.com/
Este artículo está protegido por la licencia CC BY-NC-SA 4.0. Si desea reproducirlo, por favor indique la fuente.

Este post está traducido usando ChatGPT, por favor feedback si hay alguna omisión.