2

ギッドデイ

最大 660px の高解像度画像を提供するメディア クエリを作成しようとしていますが、正確に 321px の画面は提供しません。

目的は、デスクトップ/ラップトップなどと、321px ビューポートを持つデスクトップ アプリに通常の低解像度画像を提供することですが、660 未満 (321px ビューポートを除く) は高解像度画像を取得します。

これら 2 つのクエリを使用して動作しますが、320px ビューポートは両方の画像を要求しています。私は怠惰でそのままにしておくことができます.それは賢明に表示したいものを達成しますが、不必要な帯域幅を消費しています:

@media all and (min-width:661px){  //serves high res image to iphones etc (good), but also my 321px desktop app viewport (bad)

に続く...

@media all and (min-width: 661px), all and (width:321px) {  //serves low res image to desktops (good) and my 321px desktop app viewport (good)

私は最初のクエリで not 演算子をいじっていましたが、クラックしていません。

all and (min-width:661px) and not (width:321px)

...しかし、行きません。

では、最初のクエリを次のように変更するにはどうすればよいでしょうか...

660px 未満はすべて許可しますが、正確に 321px のものは無視しますか?

ご覧いただきありがとうございます。

4

2 に答える 2

1

ここにいくつかのメディアクエリがあります。最後のものはあなたが探しているものです。320px から 322px の間であれば、ボディの背景が黒く表示されます。321px でのみ表示すると言うのと同じです。お役に立てれば！

@media only screen and (max-width: 660px) { body {background:red;} }

@media only screen and (min-width : 320px) and (max-width : 322px) {body{background:#000;}}
于 2012-11-30T16:42:07.440 に答える
0

気にしない - not を使わずにクラックしたと思う - ここにある...

@media all and (min-width: 322px) and (max-width: 660px), (max-width: 320px) {  //hi res image for all screens 660px and below, excluding those exactly 321px

...に続く...

@media all and (min-width: 661px), all and (width:321px) { //low res image for all screens above 660px, plus those exactly 321px

私が望んでいたように機能しているようです。

于 2012-11-30T16:38:28.277 に答える