C24Definir el ancho de los contenedores en porcentajes

Por qué es importante

Una persona con baja visión suele ampliar el texto al 200 % o más. Si la columna mide, por ejemplo, 900 píxeles fijos, el texto ampliado acaba saliéndose de la ventana.

Entonces tiene que mover la página a un lado y a otro en cada línea. Es agotador y es fácil perderse. Con anchos en porcentaje, el texto se adapta y se lee de arriba abajo.

Cómo se hace

1. Defina el width de las columnas y cajas de texto en porcentaje, por ejemplo width: 70%.
2. Evite anchos fijos en px en los contenedores que tienen texto.
3. Si quiere limitar el ancho en pantallas grandes, combine el porcentaje con un max-width en em.
4. Pruebe la página ampliando el texto antes de darla por terminada.

Cómo comprobarlo

1. Con las herramientas del navegador (tecla F12), revise el ancho de los contenedores de texto. Debe estar en porcentaje.
2. Amplíe el texto al 200 %.
3. Compruebe que puede leer todas las líneas sin desplazarse en horizontal.
4. Compruebe que no se ha cortado ni ocultado ningún texto.

Ejemplo

Zona de contenido de un periódico digital centrada y con ancho en porcentaje.

<style>
  .contenido { width: 70%; margin: 0 auto; }
</style>
<div class="contenido">
  <p>Texto de la noticia...</p>
</div>