Следить за новостями:

Категории
Свежие записи
BrainFБлог

Адаптивная верстка. Media Queries для стандартных экранов.

Смартфон (портретная и альбомная ориентация)

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

Смартфоны (альбомная ориентация)

@media only screen 
and (min-width : 321px) {
/* Styles */
}

Смартфоны (портретная ориентация)

@media only screen 
and (max-width : 320px) {
/* Styles */
}

iPad (портретная и альбомная ориентация)

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

iPad (альбомная ориентация)

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

iPad (портретная ориентация)

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

Настольные компьютеры и ноутбуки

@media only screen 
and (min-width : 1224px) {
/* Styles */
}

Большие экраны

@media only screen 
and (min-width : 1824px) {
/* Styles */
}

iPhone 4

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Еще по теме

Один комментарий к записи

  1. Павел
    21.12.2014 22:19:40 Ответить

    Хорошая памятка,+ тебе в карму дружище)

Ваш комментарий
выберите имя