Con la gran importancia de aprender a implementar estos fragmentos de código dentro de nuestros estilos css, los cuales no solo se deben adaptar a las resoluciones del dispositivo, sino también a la densidad de pixeles de cada pantalla y la orientación de la misma, básicamente tendremos que crear estilos genéricos para “móviles” y “PCs”, pero también deberemos especificar estilos para resoluciones y DPIs especificas, a las cuales daremos nombres de los Smarthphones o tablets a las que esten asociados.

Por Limites de resolucion de pantalla

Aqui tendremos dos tipos:

  • Estilos para resoluciones superiores a “N” Pixeles
    • Si necesitamos estilos que se apliquen para resoluciones superiores a un tamaño especifico deberemos usar: @media only screen and (min-width : Npx) { /*CSS*/}, donde “N” es el breakpoint, y los estilos solo se aplicarán cuando la resolución sea superior a este ancho de pantalla
  • Estilos para resoluciones inferiores a “N” Pixeles
    • Si necesitamos estilos que se apliquen para resoluciones inferiores a un tamaño especifico deberemos usar: @media only screen and (max-width : Npx) { /*CSS*/}, donde “N” es el breakpoint, y los estilos solo se aplicarán cuando la resolución sea inferior  a este ancho de pantalla

Estos estilos sobreescriben a los estilos generales; por ejemplo si en nuestra hoja de estilos general hemos especificado el colo rojo para cualquier resolucion, y hemos especificado de color azul para resoluciones inferiores a 1024 pixeles, y de color verde para resoluciones superiores a 1030 pixeles; solo se mostrará en color rojo para esa resolucion

//Este articulo está en pleno desarrollo