Руководство по медиа-запросам в CSS3

Медиа-запросы позволяют настроить представление ваших веб-страниц для определенного диапазона устройств, таких как мобильные телефоны, планшеты, настольные компьютеры и т. д., без каких-либо изменений в разметке. Медиа-запрос состоит из типа медиа и диапазона значений для определения ширины устройства или разрешений экрана к которому будут применены меда-свойства.

Поскольку медиа-запрос является логическим выражением, он отдает значения true или false. Результат запроса будет истинным, если тип медиа, указанный в медиа-запросе, соответствует типу устройства, на котором отображается документ, а также удовлетворены все выражения в медиа-запросе. Когда медиа-запрос имеет значение true, связанные таблицы стилей или правила стилей применяются к целевому устройству.

Вот простые примеры медиазапросов для стандартных устройств.

/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
    /* styles */
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
    /* styles */
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
    /* styles */
}
/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
    /* styles */
}
/* Tablets, iPads (portrait) ---------- */
@media screen and (min-width: 768px){
    /* styles */
}
/* Tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px){
    /* styles */
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px){
    /* styles */
}
/* Large screens ---------- */
@media screen and (min-width: 1824px){
    /* styles */
}

Изменение ширины столбцов в зависимости от размера экрана

Вы можете использовать медиазапрос для изменения ширины веб-страницы и связанных с ней элементов, чтобы обеспечить лучший вид для просмотра с разных устройств.

Следующие правила автоматически изменят ширину элемента .container в зависимости от размера экрана или области просмотра. Например, если ширина области просмотра меньше 768 пикселей, .container покроет 100% ширины области просмотра, если же больше, чем 768 пикселей, но меньше, чем 1024 пикселей, .container будет иметь ширину 750 пикселей и т. д.

.container {
    margin: 0 auto;
    background: #f2f2f2;
    box-sizing: border-box;
}
/* Mobile phones (portrait and landscape) ---------- */
@media screen and (max-width: 767px){
    .container {
        width: 100%;
        padding: 0 10px;
    }
}
/* Tablets and iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1023px){
    .container {
        width: 750px;
        padding: 0 10px;
    }
}
/* Low resolution desktops and laptops ---------- */
@media screen and (min-width: 1024px) {
    .container {
        width: 980px;
        padding: 0 15px;
    }
}
/* High resolution desktops and laptops ---------- */
@media screen and (min-width: 1280px) {
    .container {
        width: 1200px;
        padding: 0 20px;
    }
}

Изменение макетов в зависимости от размера экрана

Вы также можете использовать CSS-медиазапрос, чтобы сделать ваш многоколоночный макет веб-сайта более адаптивным для устройств за счет небольшой настройки.

Следующее правило создаст макет из двух столбцов, если размер области просмотра больше или равен 768 пикселям, но если он меньше, каждый элемент .column будет иметь 100% ширины, т.е. они будут расположены один под другим.

.column {
    width: 48%;
    padding: 0 15px;
    box-sizing: border-box;
    background: #93dcff;
    float: left;
}
.container .column:first-child{
    margin-right: 4%;
}
@media screen and (max-width: 767px){
    .column {
        width: 100%;
        padding: 5px 20px;
        float: none;
    }
    .container .column:first-child{
        margin-right: 0;
        margin-bottom: 20px;
    }
}