web-dev-qa-db-ja.com

メディアクエリでの>または<（大なり小なり）記号の使用方法

メディアクエリで ">"または "<"記号（大なり小なり）を使用できますか？たとえば、768px未満のすべてのモニターのダイビングを非表示にしたいと思います。私はこのようなことを言うことができますか：

@media screen and (min-width<=768px) {}
cssmedia-queries
18
user1986096

メディアクエリはこれらの記号を使用しません。代わりに、min-およびmax-プレフィックスを使用します。これは spec でカバーされています：

  • ほとんどのメディア機能は、オプションの「min-」または「max-」プレフィックスを受け入れて、「より大きいか等しい」および「より小さいか等しい」制約を表現します。この構文は、HTMLおよびXMLと競合する可能性がある「<」および「>」文字を回避するために使用されます。プレフィックスを受け入れるこれらのメディア機能は、ほとんどの場合プレフィックスと共に使用されますが、単独で使用することもできます。

したがって、(width <= 768px)などの代わりに(max-width: 768px)と言うことになります。

@media screen and (max-width: 768px) {}
36
BoltClock
@media screen and (max-width: 768px) { ... }
4
Zack Burt

Sass lib include-media を確認してください。これは（Sassであるにもかかわらず）@include media('<=768px')のような呼び出しがプレーンなCSS _@media_クエリにどのようにマッピングされるかを説明しています。特に、ドキュメントの このセクション を参照してください。

TLDR、そこから学べることは：

CSSでmedia('<=768px')（768以下）に相当するものを実行するには、次のように記述する必要があります。

_@media (max-width: 768px) {}
_

また、CSSでmedia('<768px')（768未満）に相当するものを実行するには、次のように記述する必要があります。

_@media (max-width: 767px) {}
_

_1_から_768_を差し引いて、最大幅が768未満になっていることに注意してください（CSSには実際には存在しない_<_より小さい動作をエミュレートしたかったため）。 。

したがって、CSSでmedia('>768px', '<=1024')のようなものをエミュレートするには、次のように記述します。

_@media (min-width: 769px) and (max-width: 1024px) {}
_

そしてmedia('>=768px', '<1024')は

_@media (min-width: 768px) and (max-width: 1023px) {}
_
2
trusktr