@media screen для мобильных устройств

Мне, как человеку каждый день занимающемуся разработкой веб сайтов часто приходится делать верстку не только под ПК, но и для мобильных устройств. Запоминать разрешения для каждого устройства желания особо нет, поэтому в данной статье я приведу @media screen для основных устройств.

Обычные мониторы и ноутбуки

@media screen and (min-width: 1240px)  {}

Планшеты

@media screen and (min-width: 1024px) and (max-width: 1240px)  {}
@media screen and (min-width: 768px) and (max-width: 1024px) {}

Телефоны

@media screen and (max-width: 768px) {}

iPad в портретной и альбомной ориентации

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {}

iPad в альбомной ориентации

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

iPad в портретной ориентации

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

iPad Retina в портретной и альбомной ориентации

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

Retina iPad в альбомной ориентации

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

Retina iPad в портретной ориентации

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

iPad 1 и 2 в портретной и альбомной ориентации

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

iPad 1 и 2 в альбомной ориентации

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

iPad 1 и 2 в портретной ориентации

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

iPad mini в портретной и альбомной ориентации

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

iPad mini в альбомной ориентации

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

iPad mini в портретной ориентации

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

iPhone 5 в портретной и альбомной ориентации

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {}

iPhone 5 в альбомной ориентации

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

iPhone 5 в портретной ориентации

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

iPhone 2G-4S в портретной и альбомной ориентации

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}

iPhone 2G-4S в альбомной ориентации

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

iPhone 2G-4S в портретной ориентации

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