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
Freigeben: 2024-12-06 05:48:14
Original
639 Leute haben es durchsucht

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)
    { }
    Nach dem Login kopieren
  • 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)
    { }
    Nach dem Login kopieren

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) 
    { }
    Nach dem Login kopieren
  • 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)
    { }
    Nach dem Login kopieren

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)
    { }
    Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage