tengo este css:
.realiser-devis { transformación de texto: mayúsculas; tamaño de fuente: 23px; peso de fuente: 700; margen: 0; color: #fff; }
y quiero reducir el tamaño de la fuente si el ancho de la pantalla es inferior a 1600 px
@media only screen and (max-width:1600px) { .realiser-devis { font-size: 12px; } }el problema es que el css dentro de la consulta de medios funciona sin cumplir la condición; el ancho de mi pantalla es de 1800 px y el tamaño de fuente es de 12 px
¿Hay algo que me estoy perdiendo?
Saludos
emir
Verifique el ancho de la pantalla usando este comando en su consola mientras inspecciona
console.log(window.screen.width) si todavía es 1800, reduzca su max-width consulta de medios a 500 y verifique, si funciona, entonces debe verificar qué problema tiene con el ancho de pantalla.
De lo contrario, intente usar consultas de medios only sin palabras clave (puede afectar a los navegadores más antiguos):
@media screen and (max-width:1600px) { .realiser-devis { font-size: 12px; } }<meta name="viewport" content="width=device-width, initial-scale=1">información útil: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag