Css медиа запросы для ipad и iphone. Шпаргалка для разработчиков

Заказать рекламу: info@it-media.kiev.ua Звоните: +380934169249

Сколько раз вам приходилось разрабатывать продукт под определенные устройства? Лично мне не однократно, не всегда, для такой работы подходят типичные css медиа запросы. Поэтому мы решили составить шпаргалку для дизайнеров и разработчиков которые создают сайты и приложение под apple устройства такие как iPad и iPhone.

iPad медиа запросы

iPad в portrait & landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px){ /* STYLES GO HERE */ }

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px){ /* STYLES GO HERE */ }

iPad в landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape){ /* STYLES GO HERE */ }

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape){ /* STYLES GO HERE */ }

iPad в portrait

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait) { /* STYLES GO HERE */ }

iPad 3 и 4 медиа запросы

Следующие медиа запросы будут работать для устройств 3-го или 4-го поколения с retina дисплеем

Retina iPad в portrait & landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}

Retina iPad в landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape)

and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}

Retina iPad в portrait

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait)

and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }

iPad 1 & 2 медиа запросы

iPad 1 & 2 в portrait & landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){ /* STYLES GO HERE */}

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (-webkit-min-device-pixel-ratio: 1){ /* STYLES GO HERE */}

iPad 1 & 2 в landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  { /* STYLES GO HERE */}

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape)

and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */}

iPad 1 & 2 в portrait

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait)

and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }

iPad mini медиа запросы

iPad mini в portrait & landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)  { /* STYLES GO HERE */}

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */}

iPad mini в landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  { /* STYLES GO HERE */}

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape)

and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */}

iPad mini в portrait

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)  { /* STYLES GO HERE */ }

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait)

and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }

iPhone медиа запросы

iPhone 6 Media Queries

iPhone 6 in portrait & landscape

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { /* STYLES GO HERE */}

@media only screen

and (min-device-width : 375px)

and (max-device-width : 667px) { /* STYLES GO HERE */}

iPhone 6 в landscape

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) { /* STYLES GO HERE */}

@media only screen

and (min-device-width : 375px)

and (max-device-width : 667px)

and (orientation : landscape) { /* STYLES GO HERE */}

iPhone 6 в portrait

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

@media only screen

and (min-device-width : 375px)

and (max-device-width : 667px)

and (orientation : portrait) { /* STYLES GO HERE */ }

iPhone 6 Plus медиа запросы

iPhone 6 Plus in portrait & landscape

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) { /* STYLES GO HERE */}

@media only screen

and (min-device-width : 414px)

and (max-device-width : 736px) { /* STYLES GO HERE */}

iPhone 6 Plus in landscape

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : landscape) { /* STYLES GO HERE */}

@media only screen

and (min-device-width : 414px)

and (max-device-width : 736px)

and (orientation : landscape) { /* STYLES GO HERE */}

iPhone 6 Plus в portrait

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

@media only screen

and (min-device-width : 414px)

and (max-device-width : 736px)

and (orientation : portrait) { /* STYLES GO HERE */ }

iPhone 5 и 5S медиа запросы

iPhone 5 и 5S в portrait & landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { /* STYLES GO HERE */}

@media only screen

and (min-device-width : 320px)

and (max-device-width : 568px) { /* STYLES GO HERE */}

iPhone 5 и 5S в landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { /* STYLES GO HERE */}

@media only screen

and (min-device-width : 320px)

and (max-device-width : 568px)

and (orientation : landscape) { /* STYLES GO HERE */}

iPhone 5 и 5S в portrait

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

@media only screen

and (min-device-width : 320px)

and (max-device-width : 568px)

and (orientation : portrait) { /* STYLES GO HERE */ }

iPhone 2G, 3G, 4, 4S медиа запросы

Эти медиа запросы так же подойдут для iPod touch 1-4 поколения

iPhone 2G-4S в portrait и landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { /* STYLES GO HERE */}

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) { /* STYLES GO HERE */}

iPhone 2G-4S в landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) { /* STYLES GO HERE */}

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px)

and (orientation : landscape) { /* STYLES GO HERE */}

iPhone 2G-4S в portrait

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px)

and (orientation : portrait) { /* STYLES GO HERE */ }

Если эта статья оказалась полезной для вас, поделитесь ей с социальных сетях. Этим вы поддержите ресурс

Источник

Отправить ответ

Please Login to comment

Войти с помощью:

Css медиа запросы для ipad и iphone. Шпаргалка для разработчиков

iPad медиа запросы

iPad в portrait & landscape

iPad в landscape

iPad 3 и 4 медиа запросы

Retina iPad в portrait & landscape

Retina iPad в landscape

Retina iPad в portrait

iPad 1 & 2 медиа запросы

iPad 1 & 2 в portrait & landscape

iPad 1 & 2 в landscape

iPad 1 & 2 в portrait

iPad mini медиа запросы

iPad mini в portrait & landscape

iPad mini в landscape

iPad mini в portrait

iPhone медиа запросы

iPhone 6 Media Queries

iPhone 6 in portrait & landscape

iPhone 6 в landscape

iPhone 6 в portrait

iPhone 6 Plus медиа запросы

iPhone 6 Plus in portrait & landscape

iPhone 6 Plus in landscape

iPhone 6 Plus в portrait

iPhone 5 и 5S медиа запросы

iPhone 5 и 5S в portrait & landscape

iPhone 5 и 5S в landscape

iPhone 5 и 5S в portrait

iPhone 2G, 3G, 4, 4S медиа запросы

iPhone 2G-4S в portrait и landscape

iPhone 2G-4S в landscape

iPhone 2G-4S в portrait

Похожие материалы:

admin

Отправить ответ