Cómo determinar qué 4 puntos de interrupción son la mejor opción para mi sitio web

¡Analice su grupo objetivo principal para el sitio! Si no conoce a su audiencia, el diseño no funcionará. Sin embargo, el enfoque más común en estos días es la mejora progresiva. Primero diseñe para la versión móvil y luego proceda a la versión para tableta y luego a escritorio (a veces también portátiles (smartwatch, etc.). Así que haría:

Punto de corte móvil

Punto de interrupción de la tableta

Punto de corte de escritorio

¡Recuerda el modo horizontal y vertical! Pero, ¿por qué establecer puntos de interrupción si, por ejemplo, crea un sitio de intranet que solo debe verse en una computadora de escritorio? Buen diseño = planificación + comunicación. Por lo tanto, nuevamente pregunte a su grupo objetivo, cree escenarios, personajes, etc. Nunca hay uno para el diseño (pero hay mejores prácticas). Cada sitio es único a continuación, hay dos ejemplos de cómo se puede hacer, el primero es mi opinión y el otro es de CSS-Tricks.

La manera fácil:

/ * RETRATO DE SMARTPHONES * /
@media solo pantalla y (min-width: 300px) {

}

/ * PAISAJE DE SMARTPHONES * /
@media solo pantalla y (ancho mínimo: 480px) {

}

/ * RETRATO DE TABLETAS * /
@media solo pantalla y (ancho mínimo: 768px) {

}

/ * PAISAJE DE LA TABLETA / ESCRITORIO * /
@media solo pantalla y (ancho mínimo: 1024px) {

}

Css-trucos:

/ * Smartphones (vertical y horizontal) ———– * /
@media solo pantalla
y (min-dispositivo-ancho: 320px)
y (max-device-width: 480px) {
/ * Estilos * /
}

/ * Smartphones (horizontal) ———– * /
@media solo pantalla
y (ancho mínimo: 321 px) {
/ * Estilos * /
}

/ * Smartphones (retrato) ———– * /
@media solo pantalla
y (ancho máximo: 320 px) {
/ * Estilos * /
}

/ * iPads (vertical y horizontal) ———– * /
@media solo pantalla
y (min-device-width: 768px)
y (max-device-width: 1024px) {
/ * Estilos * /
}

/ * iPads (horizontal) ———– * /
@media solo pantalla
y (min-device-width: 768px)
y (max-device-width: 1024px)
y (orientación: paisaje) {
/ * Estilos * /
}

/ * iPads (retrato) ———– * /
@media solo pantalla
y (min-device-width: 768px)
y (max-device-width: 1024px)
y (orientación: retrato) {
/ * Estilos * /
}

/ * Computadoras de escritorio y portátiles ———– * /
@media solo pantalla
y (ancho mínimo: 1224 px) {
/ * Estilos * /
}

/ * Pantallas grandes ———– * /
@media solo pantalla
y (ancho mínimo: 1824px) {
/ * Estilos * /
}

/* Iphone 4 —- */
@medios de comunicación
solo pantalla y (-webkit-min-device-pixel-ratio: 1.5),
solo pantalla y (min-device-pixel-ratio: 1.5) {
/ * Estilos * /
} CSS

Diría, en primer lugar, asegúrese de que realmente necesita 4 puntos de interrupción. ¿Quizás 2 o 3 podrían ser suficientes? Eso, por supuesto, depende de la complejidad y el público objetivo de su sitio web. Y en la cantidad de tiempo que puede dedicar al desarrollo y las actualizaciones.

Si no está seguro, ¿tal vez solo use los mismos puntos de interrupción que Bootstrap? Quiero decir, estoy seguro de que hicieron que investigaran … 😉 ¿O simplemente usas Bootstrap?

Entonces, la verdadera respuesta es: depende. Tendría que proporcionarnos más detalles sobre su sitio web para obtener una respuesta más específica.