Soy Italo - Un rincón personal y profesional...

Resoluciones de pantalla en CSS

Hola soy Italo / Web  / CSS  / Resoluciones de pantalla en CSS

Resoluciones de pantalla en CSS

¿Eres diseñador web?…

imagen vía: xsi.es

De pronto te encuentras con la necesidad de tener que diseñar y maquetar con HTML y CSS diferentes sitios para diferentes dispositivos, si esto te pasa, aquí va un tip.

Esto va mucho con el diseño web responsivo, o como se dice en ingles “Responsive Web Design”, si quieres saber un poco más, te invito a que leas este articulo al respecto de 40defiebre¿Qué es el diseño responsive?

Pero si ya sabes algo al respecto, o bien ya vienes de regreso después de leer el articulo, pues aquí te van las 3 diferentes resoluciones más comunes que se usan habitualmente en los diferentes dispositivos actuales:

Bueno, supongamos que estas haciendo el CSS para tu sitio web, por default lo haces pensando en la pantalla de tu computadora o laptop, que vendría siendo 1366×768 en promedio, bueno esta resolución ya la conoces.

Los diferentes tamaños para los dispositivos son:

  • 991px [para tablets grandes]
  • 767px [para tables medianas]
  • 479px [para smartphones]

Antes de continuar con los tamaños, quiero comentarte que esto tiene que ver con HTML5 y el Viewport de tu archivo .html, si quieres saber al respecto, puedes entrar aquí: Responsive Web Design – The Viewport.

Ahora bien, si quieres aplicar estilos para deferentes tipos de resolución aquí te va la sintaxis que tienes que usar para cada tamaño:


/* Empezamos con los estilos del escritorio */

@media screen and (max-width: 991px) {
/* Aquí van los estilos para tablets grandes */
}

@media screen and (max-width: 767px) {
/* Aquí van los estilos para tablets medianas */
}

@media screen and (max-width: 479px) {
/* Aquí van los estilos para smartphones */
}

Como estos, hay muchos otros tamaños, pero como menciono, esos son el estándar.

Esta publicación esta basado en la siguiente publicación: Popular Screen Resolutions: Designing for All

Si quieres profundizar en el tema estos son los siguientes artículos que te pueden interesar: