¿Cómo debo adaptar mis css para que mis webs se vean bien en todos los dipositivos?

Trabajando y estudiando! una lástima pero no queda de otra. Hay algo llamado media quiries que te va a ayudar mucho.
En tu hoja de estilos vas a decirle al navegador: che si el ancho de la pantalla es menor a 600px entonces sobrescribí las siguientes definiciones. En lugar de darle un ancho de 60% al contenedor tal, dale un ancho de 100%.




  1. (...)



  2. .container { 






  3. background: grey;






  4. border: 1px solid #000; 






  5. border: radius; 






  6. margin: 5%;






  7. width: 60%; 













  8. (...) 






  9. @media only screen and (max-width: 1199px) and (min-width: 993px){ 





  10. .container { 





  11. border: none; 





  12. width: 100%; 





  13. margin: 2%; 










  14. }



Vamos por partes.
only screen: Solo en pantallas. Si lo van a imprimir no lo tomes en cuenta.
(max-width: 1199px): Solo si el ancho máximo es de 1199px. Si la ventana o pantalla tiene un ancho de 1200, tampoco lo tomes en cuenta.
(min-width: 993px): Similar a lo anterior pero toma en cuenta el ancho mínimo.
Con el max-width y el min-width estoy creando algo así como un rango. Desde los 993px a los 1199px todos los elementos con la clase .container van a recibir estas nuevas propiedades.
Fijate que la propiedad background no la vuelvo a declarar. El fondo quiero que sea el mismo que había declarado arriba.
Los (…) simbolizan miles de propiedades CSS.
Pero esto no acaba acá. Llevaría mucho tiempo declarar todas las propiedades en cada dispositivo diferente. Entonces lo ideal es utilizar las medidas relativas. Por ejemplo:




  1. html { 





  2. font-size: 16px; 









  3. .container { 





  4. font-size: 2rem; 



  5. (...) 










  6. @media only screen and (max-width: 1199px) and (min-width: 993px){ 






  7. html { 





  8. font-size: 12px; 
















  9. .container { 






  10. border: none; 






  11. width: 100%; 






  12. margin: 2%;














Ahora presta atención a lo que hay dentro de media, ya no es solo una declaración. Puedo declarar tantos cambios como elementos de HTML tenga.
Las unidades de medida relativa nos ayudan a que nuestro diseño se adapte un poco mejor, siempre y cuando se utilicen de manera correcta.
REM es una medida que simboliza el font-size del elemento html. En la hoja de estilos declare que el html tiene un font-size de 16px.
Por lo tanto, en mi caso: 

1rem=16px

 fin de la discusión.

2 rem = 32px
1,5rem = 24px
0.5rem = 8px
Es una cuestión de multiplicar la medida que queremos que tenga por lo que tiene el elemento html.
¿Para que sirve todo este quilombo? En mi hoja de estilos declare que el elemento .container tendría 2rem. Entonces si multiplicamos 2 por 16px nos daría 32px, ¡Vamos que es muy sencillo!
La magia viene cuando mezclamos esto con las media-queries. Simplemente especificando en la media que el elemento html en la media especificada va a tener un font size de 14px. Todos los elementos .container ya no tendrán 32px. Ahora el calculo es diferente 

14px2rem=28px

. Esto se aplica a todos los elementos que tengan su font-size en rem’s. Le estoy quitando 4px a todos los elementos en solo una declaración ¡Que bonito!

Otra de las herramientas se llama flex-box, de mis favoritas. Con esta le decís al navegador. Mira este elemento padre va a ser una caja flexible. Entonces los elementos hijo se van a comportar de la siguiente manera.




  1. .container-flex { 






  2. display:flex; 






  3. flex-direction: row; 






  4. flex-wrap: wrap; 






  5. justify-content: space-beetwen; 









Voila! ahora todos los elementos que estén dentro de .container-flex van a ubicarse como se lo indiqué. Van a ubicarse en fila (muy util en navs) por la propiedad flex-direction. ¿Pero que pasa cuando la pantalla sea pequeña y no entren en fila? Muy simple, la propiedad flex-wrap: wrap les dice: ubíquense uno debajo del otro y no molesten.
Pero si es un menú ahora debería agregarle a cada elemento li un margin para que no se toquen y haya un poco de aire entre ellos. Muy simple! justify-content: space-beetwen les dice: muchachos hay que aprender a compartir, el espacio que sobre lo van a distribuir equitativamente entre ustedes pero no a sus costados.
Una imagen vale mas que mil palabras.
Lo que mas me gusta es la simplicidad de Flex-box. por ejemplo lo que acabo de escribir podría resumirse simplemente en tres propiedades.



  1. .container-flex { 






  2. display:flex; 






  3. flex-flow: row wrap; /* Defino el flex-wrap y la direccion */ 






  4. justify-content: space-beetwen; 









Ahora te toca a vos! Para aprender flexbox, los muchachos de CSS-tricks redactaron un articulo muy taquillero (#1 en google) que lo explica con muchas imágenes. Hay muchas propiedades.
A Complete Guide to Flexbox | CSS-Tricks 
Si se te dificulta entenderlo, ¡Más práctico aún! En este laboratorio de Flex-Box podes probar las locas ideas que se te ocurran. Y te escupe todo el código.
CSS flexbox playground and code generation tool
Lo ideal es mezclar flex-box con grid layout pero los muchachos de Mozilla te lo van a explicar mucho mejor en el siguiente articulo.
Relación de Grid Layout con otros métodos de diseño y posicionamiento – CSS
Para que Mozilla no se lleve todo SEO Autority en Bufa nos dan las media-queries para distintos dispositivos y tamaños, recién saliditos del horno para copiar y pegar.
CSS3: Listado de Media Queries para dispositivos móviles Y por ultimo en el siguiente post se detalla mejor esto de los rem.
Saludos!
Lo olvidaba, si te da miedo que tu codigo no se vea bien en todos los navegadores podes utilizar la siguiente herramienta. Va con rima: Le das una propiedad y te dice la compatibilidad.

Deja un comentario