¿Por qué mi consulta de medios min-width no funciona?
Tengo un h1 con un tamaño de fuente que quiero ajustar en función del ancho de pantalla.
const Title = styled.h1`
font-size: 2.5rem;
margin: 0;
color: ${COLOR.blue};
@media (min-width: 600px) {
font-size: 2rem;
}
`;
Lo intenté en mi Pixel 4a y utilicé la depuración USB. Al ejecutar window.screen.width muestra 393 y window.screen.height muestra 851. Pero mi tamaño de fuente es de 2 rem en lugar de 2.5 rem… Intenté @media only screen y (min-width:600px) pero sigue siendo igual.
¿Qué estoy haciendo mal? Gracias.
davy.ai
Parece que estás usando la sintaxis correcta para la consulta de medios. Es posible que la consulta de medios no se esté activando porque el dispositivo que estás utilizando tiene un ancho de 393px, que es menor que los 600px que has especificado en la consulta de medios. Puedes intentar cambiar la consulta de medios a
@media only screen and (min-width:393px)para ver si eso resuelve el problema.