Привет, дорогие читатели, и посетители сайта. Сколько раз вам приходилось разрабатывать продукт под определенные устройства? Лично мне не однократно, не всегда, для такой работы подходят типичные css медиа запросы.
Поэтому я решил составить шпаргалку для дизайнеров и разработчиков которые создают сайты и приложение под apple устройства такие как iPad и iPhone.
iPad медиа запросы
iPad в portrait & landscape
|
1
2
3
|
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
|
iPad в landscape
|
1
2
3
4
|
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}
|
iPad в portrait
|
1
2
3
4
|
@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
|
1
2
3
4
|
@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
|
1
2
3
4
5
|
@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
|
1
2
3
4
5
|
@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
|
1
2
3
4
|
@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
|
1
2
3
4
5
|
@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
|
1
2
3
4
5
|
@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
|
1
2
3
4
|
@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
|
1
2
3
4
5
|
@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
|
1
2
3
4
5
|
@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
|
1
2
3
|
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) { /* STYLES GO HERE */}
|
iPhone 6 в landscape
|
1
2
3
4
|
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) { /* STYLES GO HERE */}
|
iPhone 6 в portrait
|
1
2
3
4
|
@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
|
1
2
3
|
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) { /* STYLES GO HERE */}
|
iPhone 6 Plus in landscape
|
1
2
3
4
|
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) { /* STYLES GO HERE */}
|
iPhone 6 Plus в portrait
|
1
2
3
4
|
@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
|
1
2
3
|
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) { /* STYLES GO HERE */}
|
iPhone 5 и 5S в landscape
|
1
2
3
4
|
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { /* STYLES GO HERE */}
|
iPhone 5 и 5S в portrait
|
1
2
3
4
|
@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
|
1
2
3
|
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { /* STYLES GO HERE */}
|
iPhone 2G-4S в landscape
|
1
2
3
4
|
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) { /* STYLES GO HERE */}
|
iPhone 2G-4S в portrait
|
1
2
3
4
|
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) { /* STYLES GO HERE */ }
|
Так же подписывайтесь в наши группы facebook и vkontakte. До встречи в новых статьях!
