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.
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 */
}
