funciona - propiedad calc css

calc() no funciona en consultas de medios

Question

@media screen and (max-width: calc(2000px-1px)) { 
  .col { width: 200px; }
}

El valor después de la resta debe ser 1999px , sin embargo, no parece estar funcionando. Si lo cambio manualmente a 1999px funciona bien, entonces sé que no es un problema con mi CSS. ¿ calc no es compatible con consultas de medios, o estoy haciendo algo mal?

Answer 1

La respuesta de Pinal es genial, pero tu CSS no funcionaría de todos modos. Necesitas espacios que separen tus unidades. En CSS 2000px-1px se consideraría un valor único, que obviamente no es una unidad válida. Debe ser 2000px - 1px .

Actualmente estoy usando Chrome 66 y calc funciona bien en consultas de medios.

Answer 2

RESPUESTA FUE EDITADA 13.02.2018:

La especificación admite el uso de calc en consultas de medios, pero el soporte solo fue implementado recientemente por los navegadores (febrero de 2018). Actualmente, Safari Technology Preview 49+ , Chrome 66+ y Firefox 59+ admiten calc in media queries. Consulte la página de calc() MDN para obtener la información más actualizada.