3

iPad のモバイル Safari と標準の PC のブラウザーで視覚化されるサイトを開発しています。レイアウトを (特にモバイル ブラウザーに) 適応させるために、次の CSS3 メディア クエリを使用しています。

    @media only screen and (max-width: 980px), only screen and (max-device-width: 1185px) {
        #ガレリア{
        マージン左:5%;
        マージントップ:15%;
        }
    }

    @media only screen and (max-width: 1185px), only screen and (max-device-width: 980px) {
        #ガレリア{
        マージン左:16%;
        マージントップ:15%;
        }
    }

この方法は機能しますが、デバイスを回転させるとバグが出てきます。基本的にこのページには、画像を表す「ロゴ」と呼ばれるものがあります。その CSS は次のとおりです。

    #ロゴ{
        位置:絶対;
        上:30px;
        左:26%;
    }

    #ロゴ画像 {
        幅:75%;
    }

デバイスを回転させるたびに、この画像はさらに小さくなります。このバグを回避するにはどうすればよいですか? すべての答えをありがとう！

4

1 に答える 1

0

パーセントベースの幅を使用しているため、画面が大きくなっています...比率は変更されていません...とはいえ、サイズを変更したくない場合は、ハードコードすることもできませんパーセント サイズの代わりにピクセル サイズ... または、JavaScript でパーセントを計算してピクセル サイズに変換し、それを変数としてロードして、画面が回転すると新しい ("小さい錯覚」) サイズ。

于 2013-02-14T13:07:10.543 に答える