web-dev-qa-db-ja.com

calc()がメディアクエリ内で機能しない

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

減算後の値は1999pxになるはずですが、機能していないようです。手動で1999pxに変更した場合は問題なく動作するため、CSSに問題はないことがわかります。 calcはメディアクエリ内でサポートされていませんか、それとも何か問題がありますか?

42
AndSmith

回答が編集されました13.02.2018:

メディアクエリでのcalcの使用は仕様でサポートされていますが、サポートは最近ブラウザーでのみ実装されました(2018年2月)。現在、メディアクエリのcalcSafari Technology Preview 49 +Chrome 66 + 、および Firefox 59 + でサポートされています。最新の情報については、 MDNのcalc()ページ を参照してください。

38
Pinal

ピナルの答えは素晴らしいですが、CSSはとにかく機能しません。ユニットを区切るスペースが必要です。 CSS 2000px-1pxは単一の値と見なされますが、これは明らかに有効な単位ではありません。そのはず 2000px - 1px

現在Chrome 66を使用しており、calcはメディアクエリで正常に機能します。

7
Gavin