4

次の場合、さまざまなスタイルを書く必要があります

デバイスの幅がデバイスの高さより大きい

/* Landscape */
@media screen and (orientation:landscape) {
    .bg img {
        height: auto;
        width: 100%;
    }
}

デバイスの高さがデバイスの幅より大きい

/* Portrait */
@media screen and (orientation:portrait) {
    .bg img {
        height: 100%;
        width: auto;
    }
}

ブラウザーのサイズを変更する際に、一部の段階で向きが完全に機能しません。

正しいCSSの書き方は？

CSSでそれを行うことは可能ですか？

編集 ：

ブラウザのサイズを変更したときの画像を添付していますここに画像の説明を入力

4

3 に答える 3

4

次のメディア クエリ機能を使用して、ブラウザのアスペクト比にアクセスできますaspect-ratio | min-aspect-ratio | max-aspect-ratio。詳細については、MDN のCSS メディア クエリを確認してください。

ポートレートはアスペクト比が大きく1:1、ランドスケープはアスペクト比が小さくなります。確認するために、「横向き」から「縦向き」に切り替えると色が変わるJSFiddleを作成しました。

これを試して：

/* Landscape (i.e. wide viewport) */
@media screen and (min-aspect-ratio: 1/1) {
    .bg img {
        height: auto;
        width: 100%;
    }
}

/* Portrait (i.e. narrow viewport) */
@media screen and (max-aspect-ratio: 1/1) {
    .bg img {
        height: 100%;
        width: auto;
    }
}

更新:body {height: 100%;}画像はドキュメントのフローの一部であり、このJSFiddleのように、ボディも でビューポートを埋めない限り、ビューポートを埋めません。

画像をフローから引き出すようにしてくださいimg {position: absolute;}。そうすれば、画像の寸法が体のサイズによって制約されなくなります。JSFiddleを参照してください。

于 2012-11-20T14:02:51.297 に答える
2

あなたが抱えていた問題は、ブラウザによって認識されないテキスト "orientation:landscape" に依存していたことです。以下のコードを使用して、デバイスの高さと幅をチェックし、その向きを計算します。メディア クエリを実際に支援できる css-tricks.com のおかげです。メディア クエリの最も一般的な使用例を次に示します。

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

ソースhttp://css-tricks.com/snippets/css/media-queries-for-standard-devices/

于 2012-11-20T13:54:43.190 に答える
0

同様のニーズがありますが、使用していました：

        <link rel='stylesheet' media='screen and (max-aspect-ratio: 4/3)' href='css/tall.css' />
        <link rel='stylesheet' media='screen and (min-aspect-ratio: 4/3)' href='css/wide.css' />

唯一の問題は、768 x 1024 にすると正しく表示されたのに、1024 x 768 にすると空白のページが表示されることでした。次のような単純なCSS表示割り当てを使用していました。

display:none;

divをオンまたはオフにしますが、これは機能しますが、私の質問は、その中断なしで連続フローを作成するにはどうすればよいですか? 1024×768で

私は今これを使用しています：

        <link rel='stylesheet' media='screen and (orientation:portrait)' href='css/tall.css' />
        <link rel='stylesheet' media='screen and (orientation:landscape)' href='css/wide.css' />

max-aspect-ratio などを使用したいと思います。これにより、いつ変更が発生するかをより詳細に制御できるからです。つまり、1.333 の比率と 1.334 のバマーを入れることはできません...

- 新しいアップデート

         <!-- tall -->
         <link rel='stylesheet' media='screen and (max-aspect-ratio:4/3) and (min-width:0px) and (max-width:1023px)' href='css/tall.css'/>
         <!-- tall -->
         <link rel='stylesheet' media='screen and (max-aspect-ratio:4/3) and (min-width:1025px) and (max-width:9999px)' href='css/tall.css'/>
         <!-- wide -->
         <link rel='stylesheet' media='screen and (min-aspect-ratio:4/3)' href='css/wide.css'/>

上記のコードを実行することで問題を解決したと思いますが、残念です。しかし、これまでのところ機能しています。ほぼすべての画面をテストして、クエリの「条件」で正確に 4:3 の解像度が表示されることを確認する必要があります。2048 x 1536 iPad3 Retina を試してみたところ、1024 x 768 が失敗する理由がわかりませんが、上記の修正で動作しています。

----UPDATE 2 (私は面倒なことは嫌いますが)これは、aspect-ratio:4/3 の最もクリーンなソリューションのようです:

         <!-- tall 1.33301 -->
 <link rel='stylesheet' media='screen and (max-aspect-ratio:4095/3072)' href='css/tall.css'/>
         <!-- wide 1.33333 -->
 <link rel='stylesheet' media='screen and (min-aspect-ratio:4096/3072)' href='css/wide.css'/>
于 2013-03-28T10:09:52.700 に答える