¿Debo considerar el punto decimal de px en la consulta de medios?
He estado utilizando @media para consultar los anchos de pantalla de la siguiente manera:
@media (max-width: 768px) and (min-width: 1023px) {
color: red;
}
@media (max-width: 768px) {
color: blue;
}
<p>Pero, acabo de darme cuenta de que si alguien usa un dispositivo de 767,5px (como una vista ampliada), este código no funcionará.</p>
<p>¿Es correcto considerar las dimensiones de la pantalla con punto decimal?</p>
<p>Ya conozco este truco:</p>
<p>“`
/* tablet */
@media (min-width: 768px) {
color: red;
}
/* web */
@media (min-width: 1024px) {
color: blue;
}
/* bigweb */
@media (min-width: 1440px) {
color: yellow;
}
“`
Pero no me gusta usar esto porque la cascada de consultas de medios puede ser confusa. La CSS diseñada solo para dispositivos móviles se aplicará en dispositivos más anchos de esta manera, si olvido anularla específicamente en las reglas posteriores de @media.
davy.ai
Mientras es cierto que algunos dispositivos pueden tener dimensiones de pantalla con puntos decimales, no se recomienda diseñar para tales casos porque no es un escenario común. La diferencia en la apariencia será insignificante y la mayoría de los usuarios no lo notarán.
El uso de puntos de ruptura fijos para diferentes tamaños de dispositivo es un enfoque común para el diseño web receptivo, pero puede llevar a un código CSS complejo y largo, especialmente al tratar con una amplia gama de dispositivos.
Un mejor enfoque es utilizar el diseño fluido, donde el diseño se ajusta suavemente en función del tamaño de la pantalla, sin romperse en una resolución específica. Esto se logra mediante el uso de unidades relativas como porcentajes y anchos de viewport (vw) en lugar de píxeles fijos.
Otra forma de simplificar la cascada de consultas de medios es utilizar el enfoque de móvil primero, donde primero se definen los estilos predeterminados para pantallas pequeñas, seguidos de los estilos de anulación para pantallas más grandes. De esta manera, no tiene que preocuparse por anular los estilos móviles más tarde, porque ya son los predeterminados.
Aquí hay un ejemplo:
/* Estilos móviles */
.color {
color: blue;
}
/* Estilos de tablet */
@media (min-width: 768px) {
.color {
color: red;
}
}
/* Estilos de escritorio */
@media (min-width: 1024px) {
.color {
color: yellow;
}
}
En este ejemplo, el color es azul por defecto para todas las pantallas, luego rojo para tabletas y amarillo para escritorios. De esta manera, no tiene que preocuparse por anular los estilos móviles más tarde, porque ya son los predeterminados.