Desarrollo web

Media Queries CSS responsive estándar para todos los dispositivos

Por 5 agosto, 2018 marzo 18th, 2019 No hay comentarios

El éxito de un sitio web depende mucho de la experiencia del usuario. Un usuario puede acceder a un sitio web desde muchos dispositivos de diferentes tamaños, y proporcionar una experiencia igual en cada dispositivo puede ser un desafío.

¿Qué es un punto de ruptura CSS?

Los puntos de interrupción CSS son puntos en los que el contenido del sitio web responde de acuerdo con el ancho del dispositivo, lo que le permite mostrar el mejor diseño posible al usuario.

En este ejemplo, puede ver cómo el diseño se adapta al tamaño de la pantalla. El diseño a gran resolución tiene un encabezado, una sección principal después del header y luego tres columnas, pero en un dispositivo pequeño se convierte en un diseño de una columna.
responsive media queries comunes estandar

Con un millón de dispositivos diferentes en el mercado, esto puede ser una tarea difícil. Por tal razón te dejaré una lista de media queries que pueden usarse para los dispositivos más comunes que sin duda vale la pena tener en cuenta.

Si estás buscando una lista completa de media queries CSS, este repositorio es un buen recurso.

Cómo establecer puntos de ruptura CSS

La parte difícil es decidir los propios puntos de interrupción. No hay plantillas estándar. Entonces, ¿qué enfoque debería adoptar para sus puntos de interrupción?

Hay dos enfoques probables a seguir:

  • Puntos de interrupción basados ​​en dispositivo
  • Puntos de interrupción basados ​​en contenido

Puntos de interrupción basados en dispositivo

Decidir los puntos basados ​​en diferentes dispositivos parece una buena idea, pero en realidad no siempre es la mejor. Ya tenemos suficientes dispositivos de los que preocuparnos, y cuando uno nuevo sale con un ancho diferente, volver al CSS y agregar un nuevo punto nuevamente requiere tiempo, no seria lo más ideal.

No obstante, sigue siendo una opción viable, aquí hay un ejemplo específico para ciertos dispositivos:

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
 
/* Portrait */
 
@media only screen
 
and (min-device-width: 375px)
 
and (max-device-width: 667px)
 
and (-webkit-min-device-pixel-ratio: 2)
 
and (orientation: portrait) {
 
}
 
/* Landscape */
 
@media only screen
 
and (min-device-width: 375px)
 
and (max-device-width: 667px)
 
and (-webkit-min-device-pixel-ratio: 2)
 
and (orientation: landscape) {
 
}
 
/* ----------- Google Pixel ----------- */
 
/* Portrait */
 
@media screen
 
and (device-width: 360px)
 
and (device-height: 640px)
 
and (-webkit-device-pixel-ratio: 3)
 
and (orientation: portrait) {
 
}
 
/* Landscape */
 
@media screen
 
and (device-width: 360px)
 
and (device-height: 640px)
 
and (-webkit-device-pixel-ratio: 3)
 
and (orientation: landscape) {
 
}

Según esto, terminará con una gran lista de Media Queries.

Puntos de interrupción basado en contenido.

La opción ideal para decidir los puntos de interrupción se basa en el contenido del sitio. Este método permite simplemente agregar puntos de interrupción donde el contenido necesita ajustarse al diseño. Esto hará que las Media Queries sean mucho más simples y manejables.

Este punto de interrupción CSS se aplicará cuando el ancho del dispositivo sea 768px y superior.

@media only screen (min-width: 768px){
 
...
 
}

También se puede establecer un rango, por lo que el CSS solo se aplicará dentro de esos límites.

@media only screen and (min-width: 768px) and (max-width: 959px){
 
...
 
}

Los puntos de interrupción CSS son una excelente manera de reestructurar el diseño para proporcionar la mejor experiencia de usuario en diferentes dispositivos.

Siempre intentar crear puntos de interrupción basados ​​en el contenido, no en dispositivos, para que la modificación sea simple y clara. Te dejo una lista de Media Queries para los dispositivos más comunes.

Media Queries para dispositivos más comunes.

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

Deja una respuesta