/* Смартфоны (книжная и альбомная ориентация) ----------- */
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) {
/* Стили */
} 

/* Смартфоны (альбомная ориентация) ----------- */
@media only screen and (min-width : 321px) {
/* Стили */
} 

/* Смартфоны (книжная ориентация) ----------- */
@media only screen and (max-width : 320px) {
/* Стили */
} 
 
/* 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) {
/* Стили */
} 

/* Десктопы и лэптопы ----------- */
@media only screen and (min-width : 1224px) {
/* Стили */
} 

/* Большие экраны ----------- */
@media only screen and (min-width : 1824px) {
/* Стили */
} 
 
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
/* Стили */
}

Этот великолепный шаблон можно найти на CSS-Tricks среди прочих фрагментов медиазапросов. Однако я скопировал их пример полностью, что включает множество реальных мобильных устройств. Эти коды предназначены даже для устройств на основе retina, использующих min-device-pixel-ratio.

Добавлено: 12 Апреля 2018 06:48:37 Добавил: Андрей Ковальчук Нравится 0

Добавить