Heim >Web-Frontend >CSS-Tutorial >Wie schreibe ich größenspezifische Medienabfragen für iPhone 6 und 6 Plus?

Wie schreibe ich größenspezifische Medienabfragen für iPhone 6 und 6 Plus?

Linda Hamilton
Linda HamiltonOriginal
2024-12-06 05:48:14672Durchsuche

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

Größenspezifische Medienabfragen für iPhone 6 und 6 Plus

iPhone 6

  • Landschaft:

    @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)
    { }
  • Porträt:

    @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 Plus

  • Landschaft:

    @media only screen 
        and (min-device-width : 414px) 
        and (max-device-width : 736px) 
        and (orientation : landscape) 
        and (-webkit-min-device-pixel-ratio : 3) 
    { }
  • Porträt:

    @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)
    { }

Bilder starten und Symbole

iPhone 6

  • Bilder starten:

    • Porträt: 750 x 1334 (@2x )
    • Querformat: 1334 x 750 (@2x)
  • App-Symbol: 120 x 120

iPhone 6 Plus

  • Bilder starten:

    • Porträt: 1242 x 2208 (@3x)
    • Querformat: 2208 x 1242 (@3x)
  • App-Symbol: 180 x 180

Allgemein

  • Beide:

    @media only screen 
        and (max-device-width: 640px), 
        only screen and (max-device-width: 667px), 
        only screen and (max-width: 480px)
    { }

Das obige ist der detaillierte Inhalt vonWie schreibe ich größenspezifische Medienabfragen für iPhone 6 und 6 Plus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn