Tema 19 Tamaños y Responsividad
En la actualidad existen muchos dispositivos con acceso a Internet. Estos vienen en una gran variedad de tamaños: desde celulares y tabletas hasta computadoras de escritorio. Como desarrollador, debes procurar que tu contenido sea accesible para todos estos dispositivos, y así permitir que un mayor número de personas puedan verlo y apreciarlo de la mejor forma posible.
Esto puede resultar problemático, pues algunos elementos se pueden visualizar bien en una computadora, pero tal vez no en una pantalla pequeña de un celular.
Es por esto que necesitamos que las páginas web modernas sean responsivas, es decir, que se adapten a los diferentes cambios de tamaño de pantalla en los distintos dispositivos.
Ajustando tamaños
A lo largo de este módulo hemos utilizado las dos propiedades básicas de tamaño: estas son height (altura) y width (anchura). Estas se pueden aplicar a cualquier elemento para cambiar su tamaño y aceptan como valores las unidades que vimos anteriormente en la sección de márgenes. El valor predeterminado de tamaño para cualquier elemento es auto; si queremos que nuestro elemento cambie de tamaño en ciertas condiciones, entonces nos conviene utilizar algún valor relativo como los porcentajes. Además de esto, también podemos modificar los valores máximos y mínimos que puede adquirir un elemento, esto con las siguientes propiedades:
-
min-height
Altura mínima -
min-width
Anchura mínima
-
max-height
Altura máxima -
max-width
Anchura máxima
Todas las propiedades anteriores aceptan los mismos valores. De esta forma, si tenemos un elemento con max-width: 500px;, significa que el ancho de ese elemento no pasará de 500 píxeles, pero sí puede ser menos dependiendo de las demás propiedades que tenga asignado. Esta es una forma conveniente de asegurarnos que nuestros elementos sean visibles y del tamaño que queramos. Copia algunos de los ejemplos anteriores y agrega estas nuevas propiedades, ¿cómo cambian los elementos?
Ejemplo
See the Pen RwGLKJQ by Luis Yerik Arambula (@luis-yerik-arambula) on CodePen.
CodePen. Software utilizado para el desarrollo de ejercicio dinámico de programación. In CodePen. https://codepen.io
Juega con los tamaños de la ventana de tu navegador (también puedes hacer clic en los botones de "0.5x" y "0.25x" de la barra inferior del ejemplo para reescalar los elementos de la ventana), observa como el ancho del elemento se ajusta hasta que se llega hasta cierto punto. La propiedad min-width nos asegura que el ancho siempre será mayor o igual a 200px, incluso si width: 50% resultara en un tamaño menor. Esto funciona igual para max-width, por lo que nuestro elemento siempre tendrá entre 200 y 800 píxeles de ancho.