web-dev-qa-db-fra.com

calc () ne fonctionne pas dans les requêtes média

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

La valeur après soustraction doit être 1999px, mais il ne semble pas fonctionner. Si je le change manuellement en 1999px cela fonctionne bien, donc je sais que ce n'est pas un problème avec mon CSS. calc n'est-il pas pris en charge dans les requêtes multimédias ou est-ce que je fais quelque chose de mal?

42
AndSmith

LA RÉPONSE A ÉTÉ MODIFIÉE 13.02.2018:

L'utilisation de calc dans les requêtes multimédias est prise en charge par la spécification, mais la prise en charge n'a été mise en œuvre que récemment par les navigateurs (février 2018). Actuellement, calc dans les requêtes multimédias est pris en charge par Safari Technology Preview 49 + , Chrome 66 + , et Firefox 59 + . Voir page calc() de MDN pour les informations les plus récentes.

38
Pinal

La réponse de Pinal est excellente, mais votre CSS ne fonctionnerait pas de toute façon. Vous avez besoin d'espaces séparant vos unités. En CSS 2000px-1px serait considéré comme une valeur unique, qui n'est évidemment pas une unité valide. Ça devrait être 2000px - 1px.

J'utilise actuellement Chrome 66 et calc fonctionne très bien dans les requêtes multimédias.

7
Gavin