Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Menulis Pertanyaan Media Khusus Saiz untuk iPhone 6 dan 6 Plus?

Bagaimana untuk Menulis Pertanyaan Media Khusus Saiz untuk iPhone 6 dan 6 Plus?

Linda Hamilton
Lepaskan: 2024-12-06 05:48:14
asal
636 orang telah melayarinya

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

Pertanyaan Media Khusus Saiz untuk iPhone 6 dan 6 Plus

iPhone 6

  • Lanskap:

    @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)
    { }
    Salin selepas log masuk
  • Potret:

    @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)
    { }
    Salin selepas log masuk

iPhone 6 Tambahan

  • Lanskap:

    @media only screen 
        and (min-device-width : 414px) 
        and (max-device-width : 736px) 
        and (orientation : landscape) 
        and (-webkit-min-device-pixel-ratio : 3) 
    { }
    Salin selepas log masuk
  • Potret:

    @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)
    { }
    Salin selepas log masuk

Lancarkan Imej dan Ikon

iPhone 6

  • Melancarkan imej:

    • Potret: 750 x 1334 (@2x )
    • Lanskap: 1334 x 750 (@2x)
  • Ikon apl: 120 x 120

iPhone 6 Plus

  • Lancarkan imej:

    • Potret: 1242 x 2208 (@3x)
    • Lanskap: 2208 x 1242 (@3x)
  • Ikon apl: 180 x 180

Umum

  • Kedua-duanya:

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

Atas ialah kandungan terperinci Bagaimana untuk Menulis Pertanyaan Media Khusus Saiz untuk iPhone 6 dan 6 Plus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan