CSS Media Queries для мобильных устройств и компьютеров (iPhone и планшеты, компьютеры и ноутбуки)

Media Query — это мощный инструмент, который помогает разрабатывать приложения для экрана любого размера. Сегодня существует множество типов мультимедийных устройств с разным разрешением экрана, таких как ноутбуки, мобильные телефоны и планшеты. Вот почему вам нужен этот код, чтобы идеально подходить для различных разрешений экрана.

рабочий стол Ноутбуки

@media только экран и (минимальная ширина: 1224 пикселей) {
#content {background: #ffffff;}
}

Большое разрешение экрана (для большого монитора)

экран @media и (минимальная ширина: 1824 пикселей) {
#content {background: #ffffff;}
}

Пользовательский — для веб-браузера от 600 до 900 пикселей

экран @media и (минимальная ширина: 600 пикселей) и (максимальная ширина: 900 пикселей) {
#content {background: #ffffff;}
}

iPhone 5 в портретной пейзаж

экран @media only and (min-device-width: 320px) и (max-device-width: 568px) {
#content {background: #ffffff;}
}

iPad mini в портрете пейзаж

экран @media only and (min-device-width: 768px) и (max-device-width: 1024px) {
#content {background: #ffffff;}
}

iPad в портрете пейзаж

экран @media only and (min-device-width: 768px) и (max-device-width: 1024px) {
#content {background: #ffffff;}
}

Общие смартфоны (портретные и ландшафтные)

@ только для экрана и (min-device-width: 320px) и (max-device-width: 480px) {
#content {background: #ffffff;}
}