Media Queries для стандартных устройств (экранов)

В CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. Например, можно определить ноутбук с максимальным разрешением 980 px и для него установить одни стилевые свойства, а для остальных устройств другие.

Возможности мedia queries (медиа-запросов) не ограничиваются разнообразных устройств, с их помощью можно создавать адаптивный (adaptive) сайт. Такой сайт подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину сайта, число колонок, размеры изображений и текста. Другими словами при определении определенных условие меняются стили и, соответственно, внешний вид сайта.

CSS

/* Смартфоны (горизонтальный и вертикальный) ----------- */
@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 */
}

/* iPads (вертикальный и горизонтальный) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (горизонтальный) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (вертикальный) ----------- */
@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 */
}

Пример применения