0

私は電話ギャップ/アンドロイドで働いています。サイズが 304 * 250 の画像を使用する必要がありました。

320 * 480 の画面サイズと 720 * 1280 の画面サイズで完全に動作しています。

今、画面サイズ240 * 320と画面サイズ480 * 800で同じことを確認したいのですが？背景画像もデータ値も表示されませんでした。

実行された是正措置:

画像の代わりにボックス シャドウを使用することを考えました。320 * 480 の画面サイズで実装してテストしました。完璧でした。

Media Queryを使用して、画面サイズ240 * 320と画面サイズ480 * 800で同じことをテストすることを考えました

こちらを参考に実装してみましたが、うまくいきませんでした。

@media only screen and (max-width:320px) 
{ 
.container 
{ 
width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; 
} 
} 
@media only screen and (max-width:480px) 
{ 
.container 
{ 
width:250px; height:250px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; top:5px min-height:200px; 
} 
}

これも追加しました

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

私の問題

320*480 width-480 のデバイスは 2 番目の CSS@media only screen and (max-width:480px)を使用しますが、240*320 width-320 のデバイスも 2 番目の CSS を使用します。

4

1 に答える 1

1

幅 320px のデバイスは実際には両方のルールを使用しますが、2 番目のルールは CSS の後半にあるため、最初のルールを上書きします。

これはすべて、基本的に 2 番目のルールで、幅が 480px 以下のすべてのデバイスが必要に応じて動作する必要があると述べているために発生します。明らかに 320px は 480px よりも小さいため、ルールが適用されます。

2 番目の@mediaルールとして、 を使用します@media only screen and (min-width: 321px) and (max-width:480px) { ... }。幅が 321px より小さいデバイスは、2 番目のルールの影響を受けなくなりました。

于 2013-06-15T09:40:28.263 に答える