Адаптивная верстка css media screen: Адаптивный и мобильный дизайн с CSS3 Media Queries / Хабр

Содержание

Media Screen CSS в адаптивной верстке

Пришло время разобраться, что такое Media Screen в CSS3 и как это применять в своих проектах. Это так называемые Медиа-запросы CSS, с помощью которых можно адаптировать элементы дизайна под разные размеры экранов. Например можно скрыть определенный блок на мобильных и наоборот показывать его только на широких экранах (десктопах). Как я с этим столкнулся. На клиентском сайте логотип на мобильных съезжает вправо, на компьютерах он наоборот слева. Была поставлена задача написать текст, который будет показан слева от лого на маленьких экранах. На больших его быть не должно. На выручку как раз и пришли медиа-запросы Media Screen CSS. Я знаю, что многие из вас очень любят, когда им показывают наглядно, поэтому приготовил пример.

Media-screen примеры

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

Для начала в head нужно добавить такую строчку:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

CSS код сейчас такой:

#header{
	height:120px;
	position:relative
	padding:5px;
}
#content{
	background:#fff000;
	padding:5px;
}
p {
    padding: 5px;
}	
 .txt {
    font: 65px Verdana bold;
    position: relative;
    top: 16px;
    color: #fff;
    left: 80px;
   }
img{
     margin:5px;
}

#header{ height:120px; position:relative padding:5px; } #content{ background:#fff000; padding:5px; } p { padding: 5px; } .txt { font: 65px Verdana bold; position: relative; top: 16px; color: #fff; left: 80px; } img{ margin:5px; }

Ставим пред собой задачу на экранах шириной меньше 1000 px изменять цвет текста, фона, покрасить шапку, сместить значок вправо, а слева от него будет появляться надпись. И выглядеть это будет вот так:

То есть мы произведем кардинальные изменения на странице средствами Media screen CSS. Для этого пишем те самые медиа-запросы, которые будут определять ширину экрана девайса и выдавать тот или иной вид.

 @media screen and (max-width: 1000px) {
#header {
	background:#543567; /* Красим шапку */
	}
   }
 @media screen and (min-width: 1000px) {
 .txt {
      font: 25px Verdana bold; /* Показываем заголовок */
      position:relative;
      top; 15px;
      left: 30px;
      display:none;	
	}
   }
@media screen and (max-width: 1000px) {
#content {
	 background:#657493; /* Меняем цвет текста и фона содержимого */
	 color:#fff;			
	}
   }
@media screen and (max-width: 1000px) {
    img {
	float:right; /* Смещаем логотип вправо */			
	}
   }

@media screen and (max-width: 1000px) { #header { background:#543567; /* Красим шапку */ } } @media screen and (min-width: 1000px) { .txt { font: 25px Verdana bold; /* Показываем заголовок */ position:relative; top; 15px; left: 30px; display:none; } } @media screen and (max-width: 1000px) { #content { background:#657493; /* Меняем цвет текста и фона содержимого */ color:#fff; } } @media screen and (max-width: 1000px) { img { float:right; /* Смещаем логотип вправо */ } }

Более подробно можно посмотреть код демонстрационной страницы и самостоятельно разобраться что к чему.

Демо

Изменяйте ширину окна браузера, чтобы увидеть изменения. В Хроме есть функция просмотра на разных устройствах. Клавиша F12 Фактически в Media screen CSS мы создаем новые правила, которые вступят в силу только при определенных условиях. В данном случае, если дисплей будет меньше или равен 1000 px. Если будет больше, то ничего меняться не будет.

Надеюсь, что вы уловили мою мысль, которую я хотел донести до вас касательно медиа-запросов. Таким образом можно создавать отдельные таблицы стилей CSS специально для определенных устройств и даже для печати. Такой подход будет гораздо правильней, чем прописывать все стили для каждого устройства в одном файле. Подключается это вот так:

1	<link rel= "stylesheet" href= "device.css" media= "only screen and (max-device width:640px)"/>

Можно так же взять готовые стили из Bootstrap CSS и подогнать под свой дизайн.

Адаптивная верстка: media queries — AlexdevAlexdev

Добрый день, уважаемые читатели!

Сегодня я бы хотел продолжить обсуждение адаптивной верстки.

В прошлой статье мы обсудили, как сделать простенький адаптивный дизайн. После создания мы выявили 1 большой минус:

На небольших экранах изображения будут слишком мелкими.

Как решить проблему? Media Queries!

Данную проблему можно решить благодаря новой возможности CSS: media queries.

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

Рассмотрим пример:

@media screen and (max-width: 960px) {
    .class {
        background: red;
    }
}

В результате, если у пользователя экран меньше или равен 960 пикселей, то задний фон для класса .class будет красным.

Таким образом мы может подстраивать наши стили под каждый экран в отдельности.

Условия для Media Queries

Условия можно задать следующие условия:

@media screen and (max-width: XXXpx) { }
@media screen and (min-width: XXXpx) { }
@media screen and (min-width: XXXpx) and (max-width: YYYpx) { }
@media screen and (max-device-width: XXXpx) { }

Лично я чаще всего использую первое условие.

Способы подключения CSS-таблиц

Так же можно добавлять условия, для каких экранов будет подключаться та или иная таблица стилей:

<link rel="stylesheet" media="screen and (max-width: 960px)" href="big.css" />
<link rel="stylesheet" media="screen and (min-width: 480px)" href="small.css" />

<!-- для iPhone 4 -->
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

<!-- для iPad portrait and landscape -->
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Практика

Давайте доработаем пример из прошлой статьи:

HTML

<h2>...</h2>
<div>
    <div>
        <img src="../images/1.jpg" title="Деревья, листики..." />
    </div>
    <div>
        <img src="../images/2.jpg" title="Зима"  />
    </div>
    ...
</div>

CSS

h2 {
    font-size: 24px;
    text-align: center;
}
div.image_gallery {
    margin: 0 auto;
    width: 1000px;
    text-align: center;
    max-width: 90%; /* контейнер не превышает 90% ширины экрана */
    min-width: 500px;
}
img {
    float: left;
    max-width: 31%;
    height: auto;
    padding: 1%; /* небольшие оступы для изображений */
}

Что получилось? Смотрим: демонстрация 1

При небольшом разрешении картинки становятся слишком мелкими, а текст в заголовке огромным.

Решим нашу проблему!

Добавляем Media Queries

Добавим в CSS следующий код:

/* прошлый CSS */
h2 {}
div.image_gallery {}
img {}

@media screen and (max-width: 768px) { /* разрешение планшета */
    h2 {
        font-size: 20px;
    }
    div.image_gallery {
        min-width: 320px;
    }
    img {
        max-width: 48%; /* 2 изображения в ряд */
        height: auto;
        padding: 1%; /* небольшие оступы для изображений */
    }
}

Мы добавили проверку на разрешение. Если разрешение экрана меньше или равно 768 пикселей, то наша галерея перестраивается. В ряд у нас умещается теперь по 2 изображения (width 48% + padding 2%).

Демонстрация 2

В результате фотографии на экране планшета стали выглядеть намного лучше!

Теперь разберемся с экраном поменьше.

@media screen and (max-width: 480px) { /* разрешение смартфона */
    h2 {
        min-width: 320px;
        font-size: 16px;
    }
    div.image_gallery {
        width: 320px;
        min-width: 320px;
    }
    img {
        max-width: 98%;
        height: auto;
        padding: 1%; /* небольшие оступы для изображений */
    }
}

После добавления этого кода при разрешении экрана меньше либо равного 480 пикселей, изображения вновь перестраиваются и теперь отображаются по одному в ряд.

Демонстрация 3

Итог

Теперь мы имеет фотогалерею, которая удобно подстраивается под устройства. При желании можно добавить и другие разрешения (320 пкс, 960 пкс и т.д.).

Ничего сложного и такая хорошая возможность подстроить наш сайт под разные экраны!

Демонстрация 1

Демонстрация 2

Спасибо за внимание, жду вас в следующих статьях! Следующая статья: Адаптивная верстка: анимация

Подписывайтесь на рассылку 😉

Что-то осталось неясным, неточным? Пишите в комментариях!

Автор статьи: Alex. Категория: CSS
Дата публикации: 16.12.2013

СSS3 Адаптивный веб дизайн — Медиа запросы

Что такое медиа запрос?

Медиа запрос — это CSS исполнение, представленный в CSS3.

Используется правило @media для включения блока свойств CSS, только если определенно условие true.

Пример

Если окно браузера 600 пикселей или меньше, цвет фона будет светло-голубым:

@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Редактор кода »

Добавление точки прерывания

Ранее в этом уроке мы сделали веб страницу со строками и столбцами, отзывчивым, но на маленьком экране он выглядел плохо.

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

Компьютер
Телефон

Использовать медиа-запрос, чтобы добавить точку прерывания на 768 пикселей:

Пример

Когда экран (окно браузера) становится меньше, чем 768 пикселей, каждый столбец должен иметь ширину 100 процентов:

/* Для настольных компьютеров: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
    /* Для мобильных телефонов: */
    [class*=»col-«] {
        width: 100%;
    }
}

Редактор кода »

Всегда первый мобильный дизайн

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

Это означает, что мы должны внести некоторые изменения в CSS.

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

Пример

/* Для мобильных телефонов: */
[class*=»col-«] {
    width: 100%;
}
@media only screen and (min-width: 768px) {
    /* Для настольных компьютеров: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

Редактор кода »

Еще одна точка прерывания

Можно добавить любое количество точек прерывания.

Мы также вставим точку прерывания между планшетами и мобильными телефонами.

Компьютер
Планшет
Телефон

Мы делаем это, добавляя еще один медиа запрос (600px) и набор новых классов для устройств, размер которых превышает 600 пикселей (но меньше, чем 768 пикселей):

Пример

Обратите внимание, что два набора классов почти идентичны, только разница в названии (col- и col-s-):

/* Для мобильных телефонов: */
[class*=»col-«] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* Для планшетов: */
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* Для настольных компьютеров: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

Может показаться странным, что у нас есть два набора одинаковых классов, но это дает нам перспективу в HTML, чтобы решить, что будет происходить со столбцами в каждом точка прерывания:

Пример HTML

Для компьютеров:

Первый и третий раздел будет охватывать каждые 3 столбца. Средняя часть будет охватывать 6 столбцов.

Для планшетов:

Первый раздел будет охватывать 3 столбца, второй — 9, и третий раздел будет отображаться ниже первых двух разделов, и он будет охватывать 12 столбцов:

Редактор кода »

Типичные устройства точка прерывания

Есть много экранов и устройств с разной высотой и шириной, поэтому трудно создать точную точку прерывания для каждого устройства. Для простоты можно ориентироваться на пять групп:

Пример

/* Очень маленькие устройства (телефоны, 600px и ниже) */
@media only screen and (max-width: 600px) {…}

/* Маленькие устройства (портретные планшеты и большие телефоны, 600px и выше) */
@media only screen and (min-width: 600px) {…}

/* Средние устройства (альбомные планшеты, 768px и выше) */
@media only screen and (min-width: 768px) {…}

/* Большие устройства (ноутбуки / настольные компьютеры, 992px и выше) */
@media only screen and (min-width: 992px) {…}

/* Очень большие устройства (большие ноутбуки и настольные компьютеры, 1200px и выше) */
@media only screen and (min-width: 1200px) {…}

Редактор кода »

Ориентация: Книжная/Альбомная

Медиа запросы также могут быть использованы для изменения формата страницы в зависимости от ориентация браузера.

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

Пример

Веб страница будет иметь светло-голубой фон, если ориентация в альбомном режиме:

@media only screen and (orientation: landscape) {
    body {
       background-color: lightblue;
    }
}

Редактор кода »

Скрыть элементы с помощью медиа запросов

Другим распространенным использованием медиа запросов является скрытие элементов на экранах разного размера:

Я буду прятаться на маленьких экранах.

Пример

/* Если размер экрана 600 пикселей в ширину или меньше, скройте элемент */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}

Редактор кода »

Изменение размера шрифта с помощью медиа запросов

Вы также можете использовать медиа запросы для изменения размера шрифта элемента на различных размерах экранов:

Пример

/* Если размер экрана 601px или кроме того, установите размер шрифта в 80px */
@media only screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}

/* Если размер экрана 600px или менее, установите размер шрифта <div> в 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}

Редактор кода »

CSS Справочник @media

Для полного обзора всех типов носителей и функций / выражений, пожалуйста, посмотрите @media правило в нашем справочнике CSS.

Адаптивный дизайн на основе медиа-запросов / Блог компании Google Developers / Хабр

Уровень подготовки веб-мастера: средний/высокий

Нам нравится работать с данными. Мы уделяем много времени изучению аналитической информации о наших веб-сайтах. Любой веб-разработчик, которому это тоже интересно, наверняка заметил, насколько увеличился в последнее время объем трафика с мобильных устройств. За последний год значительно вырос процент просмотров страниц наших основных сайтов со смартфонов и планшетных ПК. Это значит, что все больше посетителей используют устройства с современными браузерами, поддерживающими последние версии HTML, CSS и JavaScript. Однако ширина экранов таких устройств обычно ограничена 320 пикселями.

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

четкое отображение страниц на экране с любым разрешением;
возможность просмотра группы контента на любом устройстве;
отсутствие горизонтальной полосы прокрутки независимо от размера окна.

Изменяется расположение контента, навигация и масштаб изображений – Хромбуки

Реализация

Начнем с того, что семантическая разметка содержания упрощает перекомпоновку страниц в случае необходимости. С помощью таблицы стилей мы создали резиновый макет. Это первый шаг на пути к достижению нашей цели. Вместо атрибута width для контейнеров мы стали указывать max-width. Атрибут height был заменен атрибутом min-height, чтобы крупный шрифт или многострочный текст не нарушал границы контейнера. Чтобы картинки с фиксированной шириной не ломали резиновые столбцы, применяется следующее правило CSS:

img {
   max-width: 100%;
}

Резиновый макет – хорошая идея, но использование такой компоновки накладывает некоторые ограничения. К счастью, медиа-запросы теперь поддерживаются всеми современными браузерами, в том числе IE9+ и браузерами основной части мобильных устройств. Это позволяет создавать сайты, качество отображения которых в мобильных браузерах не снижается, поскольку они оптимизируются под тот или иной интерфейс. Но сначала необходимо определить, какие особенности смартфонов должны учитываться веб-серверами.

Области просмотра

Когда пиксель не является пикселем? В том случае, если речь идет о смартфоне. Обычно браузеры смартфонов имитируют браузеры настольных компьютеров с высоким разрешением, поэтому страницы отображаются в них, как на экране монитора. Вот почему появился «режим обзора» с мелким текстом, который невозможно прочитать без увеличения. Ширина области просмотра по умолчанию в стандартных браузерах Android составляет 800 пикселей, а в браузерах iOS – 980 пикселей, независимо от фактического количества физических пикселей на экране.

Чтобы переключить браузер в более удобный для чтения режим, необходимо использовать метаэлемент viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

Существует множество вариантов разрешения экранов мобильных устройств, но стандартное значение device-width, сообщаемое браузерами, обычно составляет около 320 пикселей. Если ширина экрана вашего мобильного устройства равна 640 физическим пикселям, изображение шириной 320 пикселей будет масштабировано на всю ширину экрана, и в обработке будет использоваться в два раза больше пикселей. Таким образом, вдвое большая плотность пикселей обеспечивает более четкое отображение на небольшом экране по сравнению с экраном настольного компьютера.

Важно, что если в качестве значения элемента width в метатеге viewport указывается device-width, это значение обновляется, если пользователь меняет ориентацию экрана смартфона или планшета. В сочетании с медиа-запросами эта функция позволяет изменять макет страницы при повороте устройства:

@media screen and (min-width:480px) and (max-width:800px) {
  /* Target landscape smartphones, portrait tablets, narrow desktops

  */
}

@media screen and (max-width:479px) {
  /* Target portrait smartphones */
}

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

@media all and (orientation: landscape) {
  /* Target device in landscape mode */
}

@media all and (orientation: portrait) {
  /* Target device in portrait mode */
}

Изменяется расположение контента и масштаб изображений – Институт культуры

Пример использования медиа-запросов

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

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

Только при разрешении экрана менее 800 пикселей неосновной контент будет отображаться в нижней части страницы:

@media screen and (max-width: 800px) {
  /* specific CSS */
}

Последний медиа-запрос предназначен для смартфонов:

@media screen and (max-width: 479px) {
  /* specific CSS */
}

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

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

Изменяется расположение контента, удалено большое изображение – О Google

Заключение

Важно понимать, что не существует простого решения, которое бы позволило сделать сайты удобными для просмотра на мобильных устройствах и устройствах с узкими экранами. Резиновые макеты хороши в качестве отправной точки, но их использование накладывает некоторые ограничения. Медиа-запросы также помогают оптимизировать сайты, но не следует забывать, что в 25% случаев при посещении сайтов используются компьютерные браузеры, которые еще не поддерживают данную технологию. Наличие таких запросов влияет на эффективность их работы. А если на сайте есть виджет, с которым удобно работать с помощью мыши, вовсе не факт, что он будет столь же удобен на сенсорном экране, где сложнее выполнять точные действия.

Крайне важно начинать тестирование на ранних этапах разработки и не прекращать его в дальнейшем. Просматривая свои сайты на смартфоне или планшете, вы не тратите время впустую. Если у вас нет возможности протестировать сайт на реальных устройствах, используйте Android SDK или iOS Simulator. Попросите знакомых и коллег зайти на сайт со своих устройств и понаблюдайте за его работой.

Оптимизация сайта для мобильных устройств позволит привлечь на него еще больше посетителей. Кроме того, изучение и разработка наилучших методов такой оптимизации открывает новые возможности для профессионального развития.

Другие примеры адаптивного веб-дизайна в Google:

Авторы публикации: Руперт Брейени, Эдвард Юнг, Мэтт Зюррер, команда веб-мастеров Google.

Медиа-запросы | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	4.0+	3.6+	2.0+	2.0+

Краткая информация

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 640 пикселов и для него установить одни стилевые свойства, а для остальных устройств другие. Также можно выявить различные характеристики вроде наличия монохромного экрана, ориентации (портретная или альбомная) и др. Все характеристики легко комбинируются, поэтому допустимо задать стиль только для устройств в альбомной ориентации с заданным разрешением экрана.

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

Синтаксис

Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. Типы носителей перечислены в табл. 1.

Табл. 1. Типы носителей и их описание
Тип	Описание
all	Все типы. Это значение используется по умолчанию.
braille	Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
embossed	Принтеры, использующие для печати систему Брайля.
handheld	Смартфоны и аналогичные им аппараты.
print	Принтеры и другие печатающие устройства.
projection	Проекторы.
screen	Экран монитора.
speech	Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
tty	Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
tv	Телевизоры.

Логические операторы, применяемые в медиа-запросах

and

Логическое И. Указывается для объединения нескольких условий.

Пример. Стиль для всех цветных устройств

@media all and (color) { ... }

not

Логическое НЕ. Указывается для отрицания условия.

Пример. Стиль для всех устройств кроме смартфонов

@media all and (not handheld) { ... }

Оператор not имеет низкий приоритет и оценивается в запросе последним, поэтому выражение

@media not all and (color) { ... }

следует понимать как

@media not (all and (color)) { ... }

а не

@media (not all) and (color) { ... }

only

Применяется для старых браузеров, которые не поддерживают медиа-запросы.

Пример. Стиль для новых браузеров

@media only all and (not handheld) { ... }

В списке нет логического оператора ИЛИ, его роль выполняет запятая. Перечисление нескольких условий через запятую говорит о том, что если хотя бы одно условие выполняется, то стиль будет применён.

Пример. Стиль для устройств с альбомной ориентацией или минимальной шириной 480 пикселов.

@media all and (orientation: landscape), all and (min-width: 480px) { ... }

Также при использовании операторов следует указывать скобки, чтобы менять приоритет операций.

Медиа-функции

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

Большинство функций содержат приставку min- и max-, которая соответствуют минимальному и максимальному значению. Так, max-width: 400px означает, что ширина окна браузера меньше 400 пикселов, а min-width: 1000px, наоборот, сообщает, что ширина окна больше 1000 пикселов.

aspect-ratio (min-aspect-ratio, max-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число

Определяет соотношение ширины и высоты отображаемой области устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).

color (min-color, max-color)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 2³ цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное. В примере 1 показана такая проверка.

Пример 1. Стиль для цветных устройств

@media screen and (color) { /* Для цветных экранов */
  body { background: #fc0; }
}
@media screen and (min-color:3) { /* Минимум 512 цветов */
  body { background: #ccc; }
}

color-index (min-color-index, max-color-index)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет количество цветов, которое поддерживает устройство. В примере 2 показан стиль для экранов отображающих не меньше 256 цветов.

Пример 2. Цветной дисплей

@media all and (min-color-index: 256) {
 ...
}

device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число

Определяет соотношение сторон экрана устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/). В примере 3 показано, как установить стиль для экранов с соотношением сторон 16:9 и более.

Пример 3. «Киношное» соотношение

@media screen and (min-device-aspect-ratio: 16/9) {
 ...
}

device-height (min-device-height, max-device-height)

Тип носителя: все кроме speech
Значение: размер

Определяет всю доступную высоту экрана устройства или печатной страницы.

device-width (min-device-width, max-device-width)

Тип носителя: все кроме speech
Значение: размер

Определяет всю доступную ширину экрана устройства или печатной страницы. В примере 4 в зависимости от разрешения монитора устанавливается ширина слоя. Так, для значения 1280 пикселов ширина макета задаётся как 1100px.

Пример 4. Ширина макета

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина макета</title>
  <style>
   div {
    padding: 10px;
    background: #e8bfad;
    margin: auto;
   }
   @media screen and (min-device-width: 1600px) {
    div {width: 1500px;}
   }
   @media screen and (device-width: 1280px) {
    div {width: 1100px;}
   }
   @media screen and (device-width: 1024px) {
    div {width: 980px;}
   }
  </style>
 </head>
 <body>
  <div>
   Диабаз, формируя аномальные геохимические ряды, сменяет известняк, 
   образуя на границе с Западно-Карельским поднятием своеобразную систему грабенов.
  </div>
 </body>
</html>

grid

Тип носителя: all
Значение: нет

Определяет, что это устройство с фиксированным размером символов. Размеры букв на таком устройстве занимают одинаковую ширину и высоту и выстраиваются по заданной сетке. К подобным устройствам можно отнести терминалы, а также телефоны, которые поддерживают только один шрифт.

Если вам требуется форматировать текст, не указывайте его размер в пикселах, для подобных устройств используется единица em (пример 5).

Пример 5. Размер букв

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Стиль для бабушкофона</title>
  <style>
   @media handheld and (grid) and (max-width: 15em) {
     body { font-size: 2em; }
   }
  </style>
 </head>
 <body>
  <p>Привет! Как дела? Как сажа бела?</p>
 </body>
</html>

height (min-height, max-height)

Тип носителя: все кроме speech
Значение: размер

Высота отображаемой области.

monochrome (min-monochrome, max-monochrome)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксел. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В примере 6 показан стиль для монохромного и цветного принтера.

Пример 6. Стиль для принтера

@media print and (monochrome) { 
 body { font-family: Times, 'Times New Roman', serif; }
h2, h3, p { color: black; }
}
@media print and (color) { 
 body { font-family: Arial, Verdana, sans-serif; }
h2, h3, p { color: #556b2f; }
}

orientation

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: landscape | portrait

Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).

В примере 7 устанавливается разная фоновая картинка в случае альбомной (landscape) или портретной ориентации (portrait).

Пример 7. Использование ориентации устройства

@media screen and (orientation: landscape) { 
  #logo { background: url(logo1.png) no-repeat; }
}
@media screen and (orientation: portrait) { 
  #logo { background: url(logo2.png) no-repeat; }
}

resolution (min-resolution, max-resolution)

Тип носителя: handheld, print, projection, screen, tv
Значение: разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр)

Определяет разрешение устройства, например, принтера. В примере 8 стиль будет работать для принтера с минимальным разрешением 300 точек на дюйм.

Пример 8. Разрешение принтера

@media print and (min-resolution: 300dpi) { 
 ...
}

scan

Тип носителя: tv
Значение: interlace | progressive

Определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, что позволяет сократить передаваемые данные. В прогрессивной развёртке кадр передаётся и показывается целиком.

width (min-width, max-width)

Тип носителя: все кроме speech
Значение: размер

Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В примере 9 при уменьшении окна до 600 пикселов и меньше меняется цвет фона веб-страницы.

Пример 9. Использование max-width

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина страницы</title>
  <style>
   body { background: #f0f0f0; }
   @media screen and (max-width: 600px) {
     body { background: #fc0; }
   }
  </style>
 </head>
 <body>
  <p>Пока магма остается в камере, мусковит сингонально поднимает шток, 
  в то время как значения максимумов изменяются в широких пределах. </p>
 </body>
</html>

Примеры различных медиа-запросов CSS помимо max-width и min-width

От автора: недавно мы запустили новый веб-сайт нашей компании Mabiloft, с полностью переработанным чистым макетом и множеством новых великолепных иллюстраций и анимации. В то время как наш дизайнер проделал потрясающую работу, придумав и нарисовав сайт, сложной задачей для нас, разработчиков, было сделать так, чтобы макет оставался чистым и функциональным для каждого устройства, от большого 2К-экрана, до старого iPhone 4 с его 3,5-дюймовым экраном.

Несколько недель назад веб-сайт был почти готов, и я просматривал разные страницы, чтобы убедиться, что все было так, как задумано. Я заметил, что макет на главной странице ломается на iPad. Я быстро изменил некоторые CSS-правила и исправил их, но… после этого макет сломался на ноутбуке с маленьким дисплеем.

В поисках решения я обнаружил, что могу сделать оба макета идеальными, используя только медиа-запросы CSS, не касаясь кода JavaScript. Фактически, до этого я в основном использовал медиа-запросы CSS для создания адаптивного макета, но только с max-width и min-width.

Теперь я обнаружил, что медиа-запросы CSS — это не только max-width, их множество. И некоторые из них могут быть действительно полезны в повседневной работе.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Медиа-запросы размеров окна просмотра

Да, я говорю о width, height, min-width, min-height, max-width и max-height. Нужно ли их вам представлять? Попробую сделать это вкратце. Эти функции используются для установки разных стилей для разных размеров экрана. Они очень полезны для построения адаптивной системы.

Поскольку функции width и height могут устанавливать стили только для точного размера области просмотра, более вероятно, что вы будете использовать префиксы max и min. Например, этот код будет применять стили, если высота области просмотра превышает 320 пикселей.

body { background-color: #FFD23F; /* Yellow */ } @media screen and (min-height: 320px) { body { background-color: #EE4266; /* Red */ } }

body {

background-color: #FFD23F; /* Yellow */

}

@media screen and (min-height: 320px) {

body {

background-color: #EE4266; /* Red */

}

Красный фон будет применяться только в том случае, если высота области просмотра превышает 320 пикселей.

Но вы также можете смешать эти функции для обработки диапазона размеров.

body { background-color: #FFD23F; /* Yellow */ } @media screen and (min-width: 320px) and (max-width: 600px) { body { background-color: #EE4266; /* Red */ } }

body {

background-color: #FFD23F; /* Yellow */

}

@media screen and (min-width: 320px) and (max-width: 600px) {

body {

background-color: #EE4266; /* Red */

}

Красный фон будет применяться, если ширина области просмотра составляет от 320 до 600 пикселей.

В следующем примере показано, как можно использовать функцию min-width для изменения цвета фона в зависимости от ширины области просмотра.

body { background-color: #0EAD69; } @media screen and (max-width: 1600px) { body { background-color: #3BCEAC; } } @media screen and (max-width: 1280px) { body { background-color: #FFD23F; } } @media screen and (max-width: 960px) { body { background-color: #EE4266; } } @media screen and (max-width: 600px) { body { background-color: #540D6E; } }

body {

background-color: #0EAD69;

}

@media screen and (max-width: 1600px) {

body {

background-color: #3BCEAC;

}

@media screen and (max-width: 1280px) {

body {

background-color: #FFD23F;

}

@media screen and (max-width: 960px) {

body {

background-color: #EE4266;

}

@media screen and (max-width: 600px) {

body {

background-color: #540D6E;

}

Ориентация

Orientation — это полезная медиа-функция, которая позволяет вносить изменения в зависимости от ориентации экрана. Может иметь два значения: portrait и landscape.

Но что браузер считает portrait и что landscape? Значение portrait будет вызывать изменения каждый раз, когда высота области просмотра больше ширины. Аналогично, если ширина больше, чем высота, область просмотра будет landscape. Например, этот код дает следующий результат:

body { background-color: #FFD23F; /* Yellow */ } @media screen and (orientation: landscape) { body { background-color: #EE4266; /* Red */ } }

body {

background-color: #FFD23F; /* Yellow */

}

@media screen and (orientation: landscape) {

body {

background-color: #EE4266; /* Red */

}

Красный фон будет применяться, если ориентация области просмотра является альбомной.

Соотношение сторон

Это похоже на функцию ориентации, но более точно. Вы можете установить правила для точного соотношения сторон, которое вам нужно. Например, вы можете установить различные правила соотношения сторон для телефонов 16/9 и новых телефонов 18/9. Эта функция может также иметь префикс max- и min- для обработки ряда форматов изображения.

hover и pointer

Хорошо, я постараюсь объяснить эти медиа-функции как можно проще, так как они полезны. И hover, и pointer относятся к первичным механизмам входа сайта. Мышь, например. Или палец, если вы используете смартфон для навигации по сайту. Чтобы указать все механизмы ввода, вы можете использовать функции any-hover и any-pointer.

Теперь, что они практически делают? Функции hover (и any-hover) позволяют браузеру узнать, может ли основной механизм ввода наводиться на элементы. Вы можете использовать это следующим образом:

hover: hover, если основной механизм ввода может наводиться;

hover: none, если первичный механизм ввода не может наводиться на элементы или первичный механизм ввода с наведением отсутствует.

Когда я должен использовать это? Например, если вы хотите обрабатывать анимацию наведения на мобильных устройствах, где механизм ввода (палец) не может наводиться на элементы.

Функции pointer (и any-pointer) позволяют браузеру узнать, имеет ли основной механизм ввода указательное устройство (например, мышь), и насколько он точен. Вы можете использовать это следующим образом:

pointer: coarse, если основной механизм ввода содержит указательное устройство ограниченной точности;

pointer: fine, если основной механизм ввода содержит точное указательное устройство;

pointer: none, если основной механизм ввода не содержит указательного устройства.

Это полезно, например, для расширения области клика на устройствах с неточным указательным устройством.

Эй, это все скучные вещи, где новая классная функция, о которой ты говорил?

Она здесь! Обратите внимание, что ниже приведены экспериментальные функции, и их поддержка в настоящий момент очень ограничена.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

inverted-colors

Функция inverted-colors полезна, если вам нужно применить некоторые стили, когда системные цвета инвертированы.
Для чего мне инвертировать системные цвета? Обычно это очень полезно, если вам нужно улучшить читаемость.

Также имейте в виду, что при инвертировании цветов рекомендуется увеличивать размер шрифта и уменьшать толщину шрифта. Это отличная вещь, которую вы можете сделать с помощью этой медиа-функции!

У нее есть только пара значений:

inverted: применять стили, если цвета инвертированы;

none: применять стили по умолчанию.

Вот пример! Когда цвета инвертированы, размер текста будет увеличиваться.

.text { font-size: 24px; } @media screen and (inverted-colors: inverted) { .text { font-size: 36px; } }

.text {

font-size: 24px;

}

@media screen and (inverted-colors: inverted) {

.text {

font-size: 36px;

}

Обратите внимание, что в данный момент эта функция поддерживается только в Safari (как на MacOS, так и на iOS). Постоянно обновляемый список поддерживаемых браузеров можно найти здесь.

prefers-color-scheme

Это одна из моих любимых функций, и я надеюсь, что она постепенно станет популярной. Она позволяет разработчикам устанавливать различные стили для элементов в случае изменения цветовой схемы. И Windows, и MacOS позволяют пользователям менять системную тему со светлой на темную и наоборот, iOS 13 также представила эту функцию, а Android Q сделает это вскоре.

Поддержка браузерами также приличная. На данный момент последние версии Google Chrome, Mozilla Firefox и Safari поддерживают эту функцию. На мобильных устройствах ее поддерживают также все основные браузеры, кроме Opera. Постоянно обновляемый список поддерживающих браузеров можно найти здесь.

Значения этой функции довольно интуитивны:

light: применять стили, если пользователь предпочитает светлую тему;

dark: применять стили, если пользователь предпочитает темную тему;

no-preference: применять стили по умолчанию.

Посмотрите, как круто эта функция работает в примере ниже!

.appbar { background-color: #EE4266; } .fab { background-color: #424242; } @media screen and (prefers-color-scheme: dark) { body { background-color: #424242; } .appbar { background-color: #212121; } h3 { color: #fff; } .fab { background-color: #EE4266; } }

.appbar {

background-color: #EE4266;

}

.fab {

background-color: #424242;

}

@media screen and (prefers-color-scheme: dark) {

body {

background-color: #424242;

}

.appbar {

background-color: #212121;

}

h3 {

color: #fff;

}

.fab {

background-color: #EE4266;

}

Установка темной темы системы делает страницу также темной!

prefers-reduced-motion

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

Таким образом, в основных настольных и мобильных ОС есть опция доступности, чтобы справиться с этим беспорядком, уменьшая движение системы. prefers-reduced-motion обрабатывает эту опцию.

Данная функция может принимать два значения:

reduce: применить стили, если пользователь не хочет видеть анимацию и переходы. Обычно используется для их отключения;

no-preference: чтобы применить стандартные стили.

Посмотрите пример ниже:

.pulse { animation: pulse 2s infinite; } @media screen and (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

.pulse {

animation: pulse 2s infinite;

}

@media screen and (prefers-reduced-motion: reduce) {

.pulse {

animation: none;

}

Анимация пульсации останавливается, в зависимости от настроек пользователя.

Совместимость браузеров достаточно хороша. На данный момент только Edge и IE не имеют поддержки. С постоянно обновляемой таблицей совместимости можно ознакомиться здесь.

Заключение

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

Я хотел бы рассмотреть еще несколько примеров, таких как функция light-level, которую можно использовать для проверки уровня внешней освещенности, но большинство недавно представленных медиа-функций по-прежнему не имеют поддержки браузеров, так что… еще не время. Кстати, полный список функций можно найти здесь.

Примеры кода

Вы можете увидеть онлайн-примеры здесь. Источник с открытым исходным кодом на Github, так что вы можете посмотреть его!

Автор: Francesco Baldan

Источник: https://medium.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля!

Смотреть

@media screen для мобильных устройств

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

/* monitors and laptops */
@media screen and (min-width: 1240px)  {}

/* tablet */
@media screen and (min-width: 1024px) and (max-width: 1240px)  {}

@media screen and (min-width: 768px) and (max-width: 1024px) {}

/* mobile */
@media screen and (max-width: 768px) {}

/* iPad in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {}

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

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

/* Retina iPad in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {}

/* Retina iPad in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {}

/* Retina iPad in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {}

/* iPad 1 & 2 in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1){}

/* iPad 1 & 2 in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)  {}

/* iPad 1 & 2 in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {}

/* iPad mini in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1)  {}

/* iPad mini in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)  {}

/* iPad mini in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1)  {}

/* iPhone 5 in portrait & landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {}

/* iPhone 5 in landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {}

/* iPhone 5 in portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {}

/* iPhone 2G-4S in portrait & landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}

/* iPhone 2G-4S in landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {}

/* iPhone 2G-4S in portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {}

Отзывчивый веб-дизайн медиа-запросов

Что такое медиа-запрос?

Медиа-запрос — это метод CSS, введенный в CSS3.

Он использует правило @media для включения блока свойств CSS, только если определенное условие верно.

Пример

Если окно браузера имеет размер 600px или меньше, цвет фона будет светло-голубым:

@ только экран и (максимальная ширина: 600 пикселей) {
корпус {
цвет фона: голубой;
}
}

Попробуй сам »

Добавить точку останова

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

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

рабочий стол
Телефон

Используйте медиа-запрос для добавления точки останова на 768px:

Пример

Когда экран (окно браузера) становится меньше 768 пикселей, ширина каждого столбца должна составлять 100%:

/ * Для рабочего стола: * /
.col-1 {ширина: 8,33%;}
.col-2 {ширина: 16,66%;}
.col-3 {ширина: 25%;}
.col-4 {ширина: 33,33%;}
.col-5 {ширина: 41,66%;}
.col-6 {ширина: 50%;}
.col-7 {ширина: 58,33%;}
.col-8 {ширина: 66,66%;}
.col-9 {ширина: 75%;}
.col-10 {ширина: 83,33%;}
.col-11 {ширина: 91,66%;}
.col-12 {ширина: 100%;}

@media only screen и (max-width: 768px) {
/ * Для мобильных телефонов: * /
[class * = «col-«] {
ширина: 100%;
}
}

Попробуй сам »

Always Design для мобильных устройств First

Mobile First означает проектирование для мобильных устройств перед проектированием для настольного компьютера или любого другого устройства. другое устройство (это ускорит отображение страницы на небольших устройствах).

Это означает, что мы должны внести некоторые изменения в наш CSS.

Вместо изменения стилей, когда ширина становится меньше , чем 768 пикселей, мы должны изменить дизайн, когда ширина становится на больше, чем 768px. Это сделает наш дизайн Mobile First:

Пример

/ * Для мобильных телефонов: * /
[class * = «col-«] {
width: 100%;
}

@media только экран и (минимальная ширина: 768px) {
/ * Для настольных ПК: * /
.col-1 {ширина: 8.33%;}
.col-2 {ширина: 16,66%;}
.col-3 {ширина: 25%;}
.col-4 {ширина: 33,33%;}
.col-5 {ширина: 41,66%;}
.col-6 {ширина: 50%;}
.col-7 {ширина: 58,33%;}
.col-8 {ширина: 66,66%;}
.col-9 {ширина: 75%;}
.col-10 {ширина: 83,33%;}
.col-11 {ширина: 91,66%;}
.col-12 {ширина: 100%;}
}

Попробуй сам »

Другая точка останова

Вы можете добавить столько точек останова, сколько захотите.

Мы также вставим точку останова между планшетами и мобильными телефонами.

Мы делаем это, добавляя еще один медиазапрос (с разрешением 600 пикселей) и набор новых классов для устройств размером более 600 пикселей. (но меньше 768 пикселей):

Пример

Обратите внимание, что два набора классов практически идентичны, единственное Разница — это имя ( col- и col-s-):

/ * Для мобильных телефонов: * /
[class * = «col-«] {
width: 100%;
}

@media only screen и (минимальная ширина: 600px) {
/ * Для планшетов: * /
.col-s-1 {ширина: 8,33%;}
.col-s-2 {ширина: 16,66%;}
.col-s-3 {ширина: 25%;}
.col-s-4 {ширина: 33,33%;}
.col-s-5 {ширина: 41,66%;}
.col-s-6 {ширина: 50%;}
.col-s-7 {ширина: 58,33%;}
.col-s-8 {ширина: 66,66%;}
.col-s-9 {ширина: 75%;}
.col-s-10 {ширина: 83,33%;}
.col-s-11 {ширина: 91,66%;}
.col-s-12 {ширина: 100%;}
}

@ только экран и (минимальная ширина: 768px) {
/ * Для настольных ПК: * /
.col-1 {ширина: 8,33%;}
.col-2 {ширина: 16,66%;}
.col-3 {ширина: 25%;}
.col-4 {ширина: 33,33%;}
.col-5 {ширина: 41,66%;}
.col-6 {ширина: 50%;}
.col-7 {ширина: 58,33%;}
.col-8 {ширина: 66,66%;}
.col-9 {ширина: 75%;}
.col-10 {ширина: 83,33%;}
.col-11 {ширина: 91,66%;}
.col-12 {ширина: 100%;}
}

Может показаться странным, что у нас есть два набора идентичных классов, но это дает нам возможность в HTML , чтобы решить, что будет с колонками на каждом точка останова:

Пример HTML

для рабочего стола:

Первый и третий разделы будут занимать по 3 столбца каждый.Средняя часть будет охватывать 6 столбцов.

Для планшетов:

Первый раздел будет охватывать 3 столбца, второй раздел охватит 9, а третий раздел будет отображаться под первыми двумя разделами и будет охватывать 12 столбцов:

…

Попробуй сам »

Типичные точки останова устройства

Существует множество экранов и устройств различной высоты и ширины, поэтому сложно создать точную точку останова для каждого устройства.Для простоты вы можете нацеливаться пять групп:

Пример

/ * Очень маленькие устройства (телефоны, 600px и ниже) * /
@media only screen и (max-width: 600px) {…}

/ * Маленькие устройства (портретные планшеты и большие телефоны, 600px и выше) * /
@media only screen и (min-width: 600px) {…}

/ * Средние устройства (альбомные планшеты, 768px и выше) * /
@media только экран и (min-width: 768px) {…}

/ * Большие устройства (ноутбуки / десктопы, 992px и выше) * /
@media только экран и (min-width: 992px) {…}

/ * Очень большие устройства (большие ноутбуки и десктопы, 1200px и выше) * /
@media only screen и (минимальная ширина: 1200px) {…}

Попробуй сам »

Ориентация: Портрет / Пейзаж

Медиа-запросы также могут быть использованы для изменения макета страницы в зависимости от ориентация браузера.

У вас может быть набор свойств CSS, который будет только применять, когда окно браузера шире его высоты, так называемый «пейзаж» ориентация:

Пример

Веб-страница будет иметь светло-синий фон, если ориентация в альбомном режиме:

@media только экран и (ориентация: пейзаж) {
кузов {
цвет фона: голубой;
}
}

Попробуй сам »

Скрыть элементы с медиазапросами

Другое распространенное использование медиазапросов — скрытие элементов на экранах разных размеров:

Я буду прятаться на маленьких экранах.

Пример

/ * Если размер экрана составляет 600 пикселей в ширину или меньше, скрыть элемент * /
@media только экран и (макс. ширина: 600 пикселей) {
div.example {
дисплей: нет;
}
}

Попробуй сам »

Изменить размер шрифта с помощью медиазапросов

Вы также можете использовать медиа-запросы, чтобы изменить размер шрифта элемента на разные размеры экрана:

Пример

/ * Если размер экрана составляет 601 пикселей или более, установите размер шрифта на 80px * /
@media only screen и (min-width: 601px) {
дел.пример {
размер шрифта: 80 пикселей;
}
}

/ * Если размер экрана 600px или Меньше, установите размер шрифта

на 30px * /
@media only screen и (max-width: 600px) {
div.example {
размер шрифта: 30 пикселей;
}
}

Попробуй сам »

CSS @media Reference

Для полного обзора всех типов носителей и функций / выражений, пожалуйста, посмотрите на Правило @media в нашей ссылке CSS.

CSS Media Queries

CSS2 представила медиа типы

Правило @media , введенное в CSS2, позволило определять разные правила стиля для разных типов медиа.

Примеры: Вы можете иметь один набор правил стилей для экранов компьютеров, один для принтеры, один для портативных устройств, один для телевизионных устройств и так далее.

К сожалению, эти типы носителей никогда не получали большой поддержки со стороны устройств, другие чем тип печатного носителя.

CSS3 Введенные Медиа Запросы

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

Медиа-запросы могут использоваться для проверки многих вещей, таких как:

ширина и высота окна просмотра
ширина и высота устройства
ориентация (планшет / телефон в альбомной или портретной ориентации?)

Использование медиа-запросов является популярной техникой для предоставления индивидуального стиля листы для настольных компьютеров, ноутбуков, планшетов и мобильных телефонов (таких как телефоны iPhone и Android).

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает правило @media .

Недвижимость
@media	21,0	9,0	3,5	4,0	9.0

Синтаксис медиазапросов

Медиа-запрос состоит из медиа-типа и может содержать один или несколько выражения, которые разрешают либо истинно, либо ложно.

@media not | only mediatype и ( выражений ) {
CSS-код;
}

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

Если вы не используете операторы not или only, тип носителя является необязательным и все тип будет подразумеваться.

Вы также можете иметь разные таблицы стилей для разных медиа:

mediatype и | not | only ( выражений )» href = « print.css «>

CSS3 Media Types

Экран

Значение	Описание
все	Используется для всех устройств мультимедийного типа
печать	Используется для принтеров
	Используется для экранов компьютеров, планшетов, смартфонов и т. Д.
речь	Используется для программ чтения с экрана, которые «читают» страницу вслух

Media Queries Простые примеры

Один из способов использования медиазапросов — иметь альтернативный раздел CSS прямо внутри таблицы стилей.

В следующем примере цвет фона меняется на светло-зеленый, если область просмотра составляет 480 пикселей в ширину или шире (если область просмотра меньше 480 пикселей, цвет фона будет розовым):

Пример

@ мультимедийный экран и (минимальная ширина: 480 пикселей) {
корпус {
цвет фона: светло-зеленый;
}
}

Попробуй сам »

В следующем примере показано меню, которое будет всплывать слева от страницы, если область просмотра составляет 480 пикселей в ширину или шире (если область просмотра меньше 480 пикселей, меню будет в верхней части содержимого):

Пример

экран @media и (минимальная ширина: 480px) {
#leftsidebar {ширина: 200 пикселей; float: left;}
#основная {margin-left: 216px;}
}

Попробуй сам »

Другие примеры медиазапросов

Для получения дополнительных примеров медиазапросов перейдите на следующую страницу: Примеры CSS MQ.

CSS @media Reference

CSS @media Rule

Пример

Измените цвет фона элемента на «lightblue», когда окно браузера имеет ширину 600px или меньше:

@ только экран и (максимальная ширина: 600 пикселей) {тело
{
цвет фона: голубой;
}
}

Попробуй сам »

Ниже приведены примеры «Попробуйте сами».

Определение и использование

Правило @media используется в медиазапросах для применения разных стилей для разных типов медиа / устройств.

Медиа-запросы могут использоваться для проверки многих вещей, таких как:

ширина и высота окна просмотра
ширина и высота устройства
ориентация (планшет / телефон в альбомной или портретной ориентации?)

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

Также можно использовать медиазапросы, чтобы указать, что определенные стили предназначены только для печатных документов или для программ чтения с экрана (медиатип: печать, экран или речь).

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

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает правило @media.

Недвижимость
@media	21	9	3.5	4,0	9

Синтаксис CSS

@media not | only mediatype и (mediafeature and | or | not mediafeature) {
CSS-код;
}

значение , а не , только и и ключевые слова:

not: Ключевое слово not изменяет значение целого медиа запрос.

Только : Единственное ключевое слово не позволяет старым браузерам, которые не поддерживают медиазапросы с медиа функциями, применять указанные стили. Не влияет на современные браузеры.

и: Ключевое слово and объединяет мультимедийную функцию со мультимедийной тип или другие медиа-функции.

Все они необязательны. Однако, если вы используете , а не или только , вы также должны указать тип носителя.

Вы также можете иметь разные таблицы стилей для разных носителей, например это:

….

Типы носителей

Экран

Значение	Описание
все	По умолчанию. Используется для всех устройств медиа типа
печать	Используется для принтеров
	Используется для экранов компьютеров, планшетов, смартфонов и т. Д.
речь	Используется для программ чтения с экрана, которые «вслух» читают страницу

Media Features

Максимальная высота Максимальное разрешение Максимальная ширина Блок переполнения Указатель Разрешение

Значение	Описание
Any-Hover	Позволяет ли любой доступный механизм ввода пользователю элементы? (добавлено в Media Queries Уровень 4)
любой указатель	Является ли любой доступный механизм ввода указательным устройством, и если да, то как точно ли это? (добавлено в Media Queries Уровень 4)
аспектное соотношение	Соотношение ширины и высоты окна просмотра
цвет	Количество бит на компонент цвета для устройства вывода
цветовая гамма	Примерный диапазон цветов, которые поддерживаются пользовательским агентом и устройство вывода (добавлено в Media Queries Level 4)
цветовой индекс	Количество цветов, которое может отображать устройство
сетка	Является ли устройство сеткой или растровым изображением
высота	Высота смотрового окна
наведите	Позволяет ли основной механизм ввода пользователю наводить курсор на элементы? (добавлено в Media Queries Уровень 4)
перевернутых цветов	Инвертирует ли браузер или основную ОС цвета? (добавлено в СМИ Запросы Уровень 4)
уровень света	Текущий уровень внешней освещенности (добавлено в Media Queries Level 4)
максимальное соотношение сторон	Максимальное соотношение между шириной и высотой области отображения
max-color	Максимальное количество бит на компонент цвета для устройства вывода
Макс-цвет-индекс	Максимальное количество цветов, которое может отображать устройство
	Максимальная высота области отображения, например окна браузера
макс-монохромный	Максимальное количество бит на «цвет» на монохромном (полутоновом) устройстве
	Максимальное разрешение устройства, с использованием dpi или dpcm
	Максимальная ширина области отображения, например окна браузера
мин. Соотношение сторон	Минимальное соотношение между шириной и высотой области отображения
мин-цвет	Минимальное количество бит на компонент цвета для устройства вывода
min-color-index	Минимальное количество цветов, которое может отображать устройство
мин. Высота	Минимальная высота области отображения, например окна браузера
мин-монохромный	Минимальное количество бит на «цвет» на монохромном (полутоновом) устройстве
мин. Разрешение	Минимальное разрешение устройства, с использованием dpi или dpcm
мин. Ширина	Минимальная ширина области отображения, например окна браузера
монохромный	Количество бит на «цвет» на монохромном (полутоновом) устройстве
ориентация	Ориентация области просмотра (альбомная или портретная ориентация)
	Как устройство вывода обрабатывает контент, который выходит за пределы области просмотра вдоль оси блока (добавлено в Media Queries Level 4)
встроенный перелив	Можно ли прокручивать содержимое, которое выходит за пределы области просмотра вдоль встроенной оси (добавлено в Media Queries Level 4)
	Является ли основной механизм ввода указательным устройством, и если да, то как точно ли это? (добавлено в Media Queries Уровень 4)
	Разрешение устройства вывода, используя dpi или dpcm
сканирование	Процесс сканирования устройства вывода
сценариев	— это сценарии (например,грамм. JavaScript) доступен? (добавлено на уровне медиазапросов 4)
обновление	Как быстро устройство вывода может изменять внешний вид контента (добавлено в Media Queries Level 4)
ширина	Ширина окна просмотра

Дополнительные примеры

Пример

Скрыть элемент, если ширина браузера 600 пикселей или меньше:

@ экран мультимедиа и (максимальная ширина: 600 пикселей) {
дел.пример {
дисплей: никто;
}
}

Попробуй сам »

Пример

Используйте медиазапросы, чтобы установить цвет фона лаванды, если видовой экран 800 пикселей в ширину или шире, светло-зеленый, если ширина области просмотра составляет от 400 до 799 пикселей. Если область просмотра меньше, чем 400 пикселей, цвет фона светло-голубой:

цвет кузова {
: светло-синий;
}

@media screen и (min-width: 400px) {
body {
цвет фона: светло-зеленый;
}
}

@media экран и (минимальная ширина: 800 пикселей) {тело
{
цвет фона: лаванда;
}
}

Попробуй сам »

Пример

Создание адаптивного меню навигации (отображается горизонтально на больших экранах и вертикально на маленьких экранах):

@ экран мультимедиа и (максимальная ширина: 600 пикселей) {
.topnav a {
плавать: нет; Ширина
: 100%;
}
}

Попробуй сам »

Пример

Используйте медиа-запросы для создания адаптивного макета столбца:

/ * На экранах шириной 992 пикселя или меньше переходите от четырех столбцов к двум столбцы * /
@ мультимедийный экран и (максимальная ширина: 992 пикселей) {
.column {
ширина: 50%;
}
}

/ * На экранах шириной 600px или меньше стеки столбцов друг на друга, а не рядом друг с другом * /
@media screen и (max-width: 600px) {
.ширина столбца {
: 100%;
}
}

Попробуй сам »

Пример

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

Используйте светло-синий цвет фона, если ориентация в альбомном режиме:

@media только экран и (ориентация: пейзаж) {
кузов {
цвет фона: голубой;
}
}

Попробуй сам »

Пример

Используйте медиазапросы, чтобы установить зеленый цвет текста, когда документ отображается на экране и становится черным при печати:

@media screen {
body {
цвет: зеленый;
}
}

@media print {
корпус {
цвет: черный;
}
}

Попробуй сам »

Пример

Разделенный запятыми список : добавить дополнительный медиазапрос к уже существующему, используя запятую (это будет вести себя как оператор ИЛИ):

/ * Если ширина составляет от 600 до 900 пикселей ИЛИ больше 1100 пикселей — измените появление экрана

* /
@media и (максимальная ширина: 900 пикселей) и (минимальная ширина: 600 пикселей), (минимальная ширина: 1100 пикселей) {
дел.пример {
размер шрифта: 50 пикселей;
отступы: 50 пикселей;
граница: сплошной черный 8px;
фон: желтый;
}
}

Попробуй сам »

Связанные страницы

Учебник CSS: CSS Media Queries

Учебник CSS: примеры CSS Media Queries

RWD Tutorial: Адаптивный веб-дизайн с медиазапросами

Руководство по JavaScript: метод window.matchMedia ()

Учебник по адаптивному дизайну | HTML & CSS сложен

Mobile-First Development

Давайте погрузимся в реализацию приведенных выше снимков экрана. Это Всегда хорошая идея начать с мобильного макета и продолжить свой путь до настольная версия. Макеты рабочего стола, как правило, более сложны, чем их мобильные коллеги, и этот подход «мобильный сначала» максимизирует количество CSS, который вы можете использовать в своих макетах.

Сначала нам нужно заполнить отзывчивым.HTML Элемент с несколькими пустыми ящиками. Каждая коробка имеет изображение в этом, чтобы мы могли различить их немного проще.

А вот и наши базовые стили, которые должны применяться к всем макетам (мобильный, планшетный и настольный компьютер). Убедитесь, что добавили их выше @media правил, которые мы создали ранее и ниже универсального селектора правило, которое сбрасывает наши поля и отступы:

  .page {
  дисплей: гибкий;
  flex-wrap: обертывание;
}

.раздел {
  ширина: 100%;
  высота: 300 пикселей;
  дисплей: гибкий;
  justify-content: центр;
  align-items: center;
}

,меню {
  цвет фона: # 5995DA;
  высота: 80 пикселей;
}

.header {
  цвет фона: # B2D6FF;
}

.content {
  цвет фона: # EAEDF0;
  высота: 600 пикселей;
}

.Зарегистрироваться {
  цвет фона: # D6E9FE;
}

.feature-1 {
  цвет фона: # F5CF8E;
}

.feature-2 {
  цвет фона: # F09A9D;
}

.feature-3 {
  цвет фона: # C8C6FA;
}

Если вы сделаете окно браузера узким, вы увидите, что это дает нам весь мобильный макет. Довольно легко, а? Нет медиа-запросов не требуется. Это почему он называется «сначала мобильный» — мобильная версия не требует специальной обработки.Также обратите внимание, что flex-wrap имущество в котором содержится .стр. div. Это сделает это очень легко реализовать наши макеты планшета и рабочего стола.

  Сохраняя эти базовые стили вне медиазапросов, мы можем
переопределить и добавить к ним, как мы реализуем наши конкретные макеты. Это
действительно удобно, когда, например, ваш дизайнер хочет настроить цвет
Схема для всего сайта. Вместо отслеживания избыточных  объявлений в цвет фона  в нескольких  @media  правила, вам нужно только обновить его здесь.Это изменение автоматически применяется к
макеты для мобильных устройств, планшетов и компьютеров.
 ,No related posts.