4

width＆のさまざまな組み合わせを試しましたdevice-widthが、横向きのiPhoneでは、このコードによって背景が赤くなることはありません。

複数のメディアクエリがある場合に問題が発生します。このJSfiddleの例を参照してください。最後のメディアクエリを削除しない限り、divの背景が緑色になることはありません。

これは私がターゲットとする3つの異なるメディアクエリが欲しいものです：

  1. スマートフォンとタブレットの両方（ポートレートのみ）。これは、レスポンシブレイアウトのためのすべての一般的なスタイルがある場所です
  2. 幅：320px-479px-これは、縦向きのiPhoneなどの小さな画面にのみ適用されます
  3. 幅：480px-640px-これは、横向きのiphoneや縦向きのipadなどの大きな画面に適用されます。風景の中のiPadではありません。

これはHTMLメール用であるため、JSを使用できないことに注意してください。

@media only screen and (max-width: 640px) {
    body { padding: 10px !important }
}
/* Small screen */
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) {
    body { background: blue !important }
}
/* iPhone landscape and iPad portrait */
@media only screen and (max-device-width: 480px) and (max-device-width: 640px) {
    body { 
       background: red !important 
       -webkit-text-size-adjust:none; 
    }
}

参照：http ：//css-tricks.com/snippets/css/media-queries-for-standard-devices/

4

5 に答える 5

24

あなた自身の試みが変更されました 

@media only screen and (max-width: 640px) and (orientation: portrait) {
    body { padding: 10px !important }
}

/* Small screen */
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) and (orientation: portrait) {
    body { background: blue !important }
}

/* iPhone landscape and iPad portrait */
@media only screen and (max-device-width: 480px) and (orientation: landscape),
@media only screen and (max-device-width: 640px) and (orientation: portrait)  {
    body { 
       background: red !important 
       -webkit-text-size-adjust:none; 
    }
}
于 2012-12-23T17:33:33.703 に答える
3

メディア クエリは、デバイスの向きもサポートしています。あなたはそれを試してみるべきです

@media screen and (orientation:portrait) {
    /* Portrait styles */
}

@media screen and (orientation:landscape) {
    /* Landscape styles */
}

このように幅を合わせて組み合わせることもできます

@media screen and (max-device-width : 320px) and (orientation:portrait) {

}
于 2012-12-17T08:07:01.497 に答える
1

このリソースを見てください。http：//arcsec.ca/media-query-builder/のほとんどすべてのメディアクエリが表示されます。最小幅も指定する必要があります。また、！important、dirty:)も少なくなります

あなたの場合

@media only all and (min-device-width: 320px) and (max-device-width: 480px) {
/* insert styles here */
}
于 2012-12-17T08:01:06.557 に答える
1

非常に多くの電子メール クライアントが存在し、メディア クエリのサポートが制限される可能性があるため、レスポンシブ メールは難しい場合があります。メディアクエリではなく、div をパーセンテージで流動的にすることを検討したいだけかもしれません。zurb の人​​々は、役立つかもしれない優れたテンプレートをいくつか持っています。http://www.zurb.com/playground/responsive-email-templates

それが役立つことを願っています。

于 2012-12-20T12:05:47.307 に答える
0

Omのソリューションを差分で使用してこれを試しました。それが私のために働いた方法、それが誰かを助けることを願っています

@media only screen and (max-device-width:1024px) and (orientation: portrait)     {
    /*style*/    
    }
@media only screen and (max-device-width: 1024px) and (orientation: landscape)  {
    /*style*/
}
于 2017-11-02T17:40:49.197 に答える