Xitrus está alojado en:
El texto es la parte más importante de una página web, suele estar preparado para verse correctamente en pantallas normales, pero también es importante adaptarlo a los Responsive Designs.
En este artículo veremos como podemos adaptar al tamaño a todo tipo de tamaños de pantalla y así asegurarnos que la lectura de una web es fácil y agradable en dispositivos móviles.
Podemos adaptar el tamaño del texto de varias formas, la primera es usar en lugar de medidas en píxeles (px) usar medidas relativas de texto como son los em, que varía según el tamaño establecido anteriormente en píxeles (por ejemplo si hemos establecido 20px para toda la página y usamos 1.5em para algo específico su tamaño será una vez y media de 20px), para este método es necesario cambiar dinámicamente el tamaño del texto en toda la página.
Y otra opción es usar @media queries, con las que podremos establecer según el tamaño de la pantalla en el que se visualiza el tamaño de la letra, podemos hacerlo de forma individual o a toda la página, por lo que es una buena forma de poner en marcha el método anterior, como veremos más adelante.
Normalmente estas medidas son usadas por los títulos (h1, h2, h3...) que varían de tamaño según el tamaño el texto de su contenedor, por ejemplo si tenemos un h1 dentro de un cuadro con la letra de 40px el título tomará una medida más grande a esta (tiene un porcentaje más grande establecido).
Para ver un ejemplo vamos a cambiar el tamaño del texto de un bloque y pondremos varias medidas relativas para entender el concepto.
La forma con la que adaptaremos el texto de una web a todo tipo de pantallas con este método es estableciendo todos los tamaños de la letra de una página con la unidad em, y así simplemente cambiando el tamaño del texto de la página el texto se adaptará.
La forma fácil de hacer el cambio es con las @media queries, que ahora veremos lo que son.
Para los que no sepáis lo que son las @media queries son reglas que nos permiten mostrar unos estilos u otros según el tamaño de la pantalla (por ejemplo).
Con esto lo que podremos hacer es cambiar cualquier estilo de la web en ciertos tamaños de pantalla, por ejemplo, si vemos la web desde una pantalla estrecha en lugar de tener un texto con letras grandes hacemos que sea más pequeño para que entre más contenido (como vemos en la primera imagen y como podéis comprobar que pasa si hacéis esta página pequeña).
Voy a poner otro ejemplo, que se puede comprobar el funcionamiento desde un navegador de escritorio haciendo la ventana pequeña, el siguiente bloque cambiará su tamaño de letra según el tamaño de la pantalla.
Para usar correctamente este método es aconsejable hacer el texto (el del contenido) algo más pequeño, para que se visualice correctamente o en el caso de títulos y demás para que entre en el ancho de pantalla, puede ser por varios motivos.
El siguiente código es el que podríamos usar para cambiar el tamaño del texto de solo el contenido de una web.
- /* Por debajo de 700px */(
- @media screen and (max-width: 700px){
- .contenido{
- font-size:12px;
- }
- .titulo{
- font-size:18px;
- }
- }
-
- /* Por debajo de 400px */(
- @media screen and (max-width: 400px){
- .contenido{
- font-size:10px;
- }
- .titulo{
- font-size:16px;
- }
- }
En el código anterior según el tamaño modificaríamos las dimensiones de la letra, así nos aseguramos de que se muestre correctamente, ya que si vemos en un dispositivo móvil estrecho un texto con la letra muy grande cogerán pocas líneas y estaremos haciendo scroll continuamente.
Para poner en práctica el método de los tamaños relativos en em y cambiar el texto de la página entera lo normal es cambiar el tamaño de letra del <body>, como veremos a continuación. De esta forma todos los tamaños de letra variarán según este tamaño.
- /* Por debajo de 700px */(
- @media screen and (max-width: 700px){
- body{
- font-size:12px;
- }
- }
-
- /* Por debajo de 400px */(
- @media screen and (max-width: 400px){
- body{
- font-size:10px;
- }
- }
Ambos metodos tienen ventajas y desventajas, el primero podemos ponerlo en práctica y olvidarnos un poco de estar estableciendo el tamaño de cada texto, pero lo bueno es que podemos poner en práctica ambos métodos y si hay algunos tamaños que con los tamaños relativos no quedan correctamente lo podemos solucionar con una @media query.
Xitrus está alojado en:
