¿Entonces siempre usaré 600px para tablet y 800px para desktop en todos mis proyectos? o ¿Que otras medidas se usan?

Gracias Vbust :D

Aunque no hay una regla exacta de cuales son las medidas que se deben usar todo depende del tipo de desarrollo que vayas a llevar.

Si es Mobile First (pensado para dispositivos moviles) se comienza desde los siguientes breakpoints/medidas:

• @media screen and (min-width: 320px) {}
• @media screen and (min-width: 480px) {}
• @media screen and (min-width: 768px) {}
• @media screen and (min-width: 1024px) {}

De esta manera comienzas diseñando en la resolucion mas pequeña (no hay dispositivos inteligentes con pantallas menores de 320px) y luego vas subiendo hasta llegar a pantallas de laptop 1024px. incluso se podrian agregar resoluciones de 1280px y 1440px para pantallas mas grandes.

En cambio si tu objetivo es desarrollar para pantallas grandes y que sea adaptable a dispositivos moviles se utiliza el contrario.

• @media screen and (max-width: 1440px) {}
• @media screen and (max-width: 1280px) {}
• @media screen and (max-width: 1024px) {}
• @media screen and (min-width: 768px) {}
• @media screen and (min-width: 480px) {}
• @media screen and (min-width: 320px) {}

En todo caso lo recomendable es tener un minimo de 3 media queries y un maximo de 5, para que no sea muy complicado.

Por ultimo no tomes como medidas las resoluciones de dispositivos especificos digamos por ejemplo un Iphone 11 a menos que tus aplicaciones sean dirigidos especificamente para ese dispositivo, procura utilizar los breakpoints estandares.

Un saludo.

Muchas gracias a Gersonangel, Luis_LiraC y johncardenasp, me queda mucho mas claro :D

En realidad estas medidas expuestas en la clase son muy poco usadas en proyectos reales 😅. Solo se enseñaron estas para finalidad de la clase.

Lo que por lo general se hace es lo que te indican los compañeros Luis y Gerson.

No hay unas medidas de media queries que sean super exactas u obligatorias y que esté tallado en piedra. Lo recomendable es que sea lo más general posible.

El mínimo es 320px y normalmente con esto se empieza cuando haces Mobile First, también mucha gente lo más grande que lo hacen es el 1024px, pero también tendrías qué verificar cuántos de tus usuarios podrían estar accediendo desde resoluciones aún más grandes, por ejemplo, pantallas tamaño 4k, tendrías que dar soporte para que tu sitio no se vea muy pequeño en sus pantallas.

Hola Santiago, en el curso de Responsive Design ahondan en el tema, te dejo algunas de las recomendaciones que allí nos dan

Mobile First: @media screen and (min-width: 320px) {} @media screen and (min-width: 480px) {} @media screen and (min-width: 768px) {} @media screen and (min-width: 1024px) {}

Desktop First: @media screen and (max-width: 1024px) {} @media screen and (min-width: 768px) {} @media screen and (min-width: 480px) {} @media screen and (min-width: 320px) {}