> 웹 프론트엔드 > CSS 튜토리얼 > iPhone 6 및 6 Plus에 대한 크기별 미디어 쿼리를 작성하는 방법은 무엇입니까?

iPhone 6 및 6 Plus에 대한 크기별 미디어 쿼리를 작성하는 방법은 무엇입니까?

Linda Hamilton
풀어 주다: 2024-12-06 05:48:14
원래의
639명이 탐색했습니다.

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)
    { }
    로그인 후 복사

아이폰 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿