web-dev-qa-db-ja.com

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

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

@media screen and (min-width<=768px) {}
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