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

Поскольку медиа-запрос является логическим выражением, он отдает значения 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;
    }
}

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

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

Вы также можете использовать 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;
    }
}

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.