ホームページ > ウェブフロントエンド > CSSチュートリアル > iPhone 6 および 6 Plus のサイズ固有のメディア クエリを作成するにはどうすればよいですか?

iPhone 6 および 6 Plus のサイズ固有のメディア クエリを作成するにはどうすればよいですか?

Linda Hamilton
リリース: 2024-12-06 05:48:14
オリジナル
634 人が閲覧しました

How to Write Size-Specific Media Queries for iPhone 6 and 6 Plus?

iPhone 6 および 6 Plus のサイズ固有のメディア クエリ

iPhone 6

  • 風景:

    @media only screen 
        and (min-device-width : 375px) // or 213.4375em or 3in or 9cm
        and (max-device-width : 667px) // or 41.6875em
        and (width : 667px) // or 41.6875em
        and (height : 375px) // or 23.4375em
        and (orientation : landscape) 
        and (color : 8)
        and (device-aspect-ratio : 375/667)
        and (aspect-ratio : 667/375)
        and (device-pixel-ratio : 2)
        and (-webkit-min-device-pixel-ratio : 2)
    { }
    ログイン後にコピー
  • ポートレート:

    @media only screen 
        and (min-device-width : 375px) // or 213.4375em
        and (max-device-width : 667px) // or 41.6875em
        and (width : 375px) // or 23.4375em
        and (height : 559px) // or 34.9375em
        and (orientation : portrait) 
        and (color : 8)
        and (device-aspect-ratio : 375/667)
        and (aspect-ratio : 375/559)
        and (device-pixel-ratio : 2)
        and (-webkit-min-device-pixel-ratio : 2)
    { }
    ログイン後にコピー

iPhone 6さらに

  • 風景:

    @media only screen 
        and (min-device-width : 414px) 
        and (max-device-width : 736px) 
        and (orientation : landscape) 
        and (-webkit-min-device-pixel-ratio : 3) 
    { }
    ログイン後にコピー
  • ポートレート:

    @media only screen 
        and (min-device-width : 414px) 
        and (max-device-width : 736px)
        and (device-width : 414px)
        and (device-height : 736px)
        and (orientation : portrait)
        and (-webkit-min-device-pixel-ratio : 3) 
        and (-webkit-device-pixel-ratio : 3)
    { }
    ログイン後にコピー

起動イメージとアイコン

iPhone 6

  • 起動画像:

    • ポートレート: 750 x 1334 (@2x) )
    • 風景: 1334 x 750 (@2x)
  • アプリアイコン: 120 x 120

iPhone 6 Plus

  • 起動画像:

    • 縦向き: 1242 x 2208 (@3x)
    • 横向き: 2208 x 1242 (@3x)
  • アプリアイコン: 180× 180

一般

  • 両方:

    @media only screen 
        and (max-device-width: 640px), 
        only screen and (max-device-width: 667px), 
        only screen and (max-width: 480px)
    { }
    ログイン後にコピー

以上がiPhone 6 および 6 Plus のサイズ固有のメディア クエリを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート