Media queries CSS как АДАПТИРОВАТЬ сайт

CSS3 Медиа-запросы (Media queries CSS), позволяют реализовать как адаптивный веб-дизайн так и всякого рода оформление. В данном материале по свешенным Media queries мы реализуем пример как делаются адаптивные сайты.

See the Pen aVRZxO by Denis (@Dwstroy) on CodePen.

Из видео вы узнаете:

• что такое Media queries и его составляющие элементы;
• как формируется медиа запросы;
• рассмотрим практически пример адаптивного дизайна сайта.

CSS3 медиа запросы или (media queries) – это определенный набор стилей и логических выражений, которые позволяют применять различные стили в зависимости от выполнения каких то дополнительных условий.

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

Медиа запрос состоит

@media screen and (max-width: 480px) {
    h1 {
        font-size: 25px;
    }
}

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

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

Все запросы начинаются с правила @madia, далее идет условие, в котором пишем тип носителя (screen), он позволяет получить точную информацию, на каком устройстве открыта данная страница. Помимо этого типа имеются и другие носители как print, all и speech.

Типы носителей включают в себя

• all – Подходит для всех видов устройств. Это значение используется по умолчанию.
• print – Просмотр на экране страничек в режиме предварительного просмотра печати.
• screen – Просмотр на экране цветных компьютерных мониторах.
• speech - Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.

В CSS2.1 имелись несколько дополнительных типов, но они приняты устаревшими и в Media Queries 4 не задействованы.

Устаревшие типы носителей:

• braille - Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
• embossed - Принтеры, использующие для печати систему Брайля.
• handheld - Смартфоны и аналогичные им аппараты.
• projection – Проекторы.
• tty - Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
• tv – Телевизоры.

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

Логические операторы

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

К примеру,  and, эквивалентно «И», и в этом случае если одно из условий будет не истиной значить и все выражение, является ложью. 

Следующий оператор «запитая», которая эквивалентна «ИЛИ», и в данном случае если одно из условий верное, значит выражение является истиной. 

Оператор not отрицание, а only позволяет скрыть стиль от всех браузерах, которые не поддерживают данное условие.

Логические операторы:

• and – Связывает друг с другом разные условия (эквивалентно «и»);
• not – Позволяет сработать медиа запросу в противоположном случае (эквивалентно «отрицание»);
• only – Скрывает стили для браузера, которые не поддерживают данные условия;
• , - Запятая работает по аналои с логическим оператором or (эквивалентно «или»);

Условие медиа запроса

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

Самые распространенные условия это максимальная и минимальная ширина max-width min-widt

Прописав (max-width: 480px), сам стиль в нутрии скобок будет применен в том случае, когда ширина экрана менее 480 пикселей.

Именно на таких примерах базируется адаптивная верстка, когда нам нужно применить стили под определенные расширения экраны мобильного устройства и все это делается через CSS (media queries).

• width min-width max-width – ширина;
• height min-height max-height – высота;
• device-width min-device-width max-device-width – ширина на устройстве;
• device-height min-device-height max-device-height orientation - высота на устройстве;
• aspect-ratio min-aspect-ratio max-aspect-ratio – соотношение сторон;
• device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio - соотношение сторон на устройстве;
• resolution min-resolution max-resolution – разрешение экрана (количество пикселей);
• color min-color max-color – количество бит на каждые из цветных компонентов устройства вывода;
• color-index min-color-index max-color-index – количество записей в таблице подставноки цветов;
• monochrome min-monochrome max-monochrome – количество битов на пиксель монохромного устройства;
• scan grid – сетка сканирования;

Описываем основную структуру в HTML и CSS

Теперь рассмотрим, как это выглядит в действительности на примере создания простенького каркаса сайта.

Создаем пять блоков, шапка сайта header, верхнее меню top_menu, левый сайт бар sideLeft, область для контента content и подвал footer.

<div class="header"></div>
<div class="top_menu"></div>
<div class="sideLeft"></div>
<div class="content"></div>
<div class="footer"></div>  

Затем определим для них стили

Для header назначим свой цвет, укажем ширину в 100%, высоту в 200 пик. и закруглим углы.

.header {
    background: #aefff7;
    width: 100%;
    height: 200px;
    border-radius: 5px;
}

Верхнему меню назначим, свой цвет, ширину в 100%, сделаем отступ сверху в 5 пик., высоту в 50 пик.

.top_menu {
    background: #87c5ff;
    width: 100%;
    margin-top: 5px;
    height: 50px;
}

Сайт бару, прописываем свои стили и прижмем его к левому краю:

.sideLeft {
    background: #81ffb6;
    width: 30%;
    height: 354px;
    margin-top: 5px;
    padding: 1px 0;
    float: left;
}

Далее для области под контент пишем свои стили:

.content {
    background: #fefffd;
    width: 69%;
    margin-top: 5px;
    height: 355px;
    float: right;
}

И завершающий блок это футер, делаем его на всю ширину в своем цвете:

.footer {
    background: #91a43c;
    width: 100%;
    margin-top: 5px;
    height: 70px;
}

Из-за того что sideLeft и content являются плавающими элементами за счет float, нужно сбросить обтекание этих блоков при помощи clear:both;.

Создадим класс и вставим дополнительный блок с этим классом:

 .clear{
    clear:both;
}

<div class="clear"></div>  

У нас получился такого рода резиновый шаблон сайта, условно разделенный на блоки.

Подключаем CSS media queris

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

<div class="wrapper">
	<div class="header"></div>
	<div class="top_menu"></div>
	<div class="sideLeft"></div>
	<div class="content"></div>
	<div class="clear"></div>
	<div class="footer"></div>
</div>

.wrapper {
    width: 940px;
    margin: 50px auto;
}

Затем для всех медиа запросов создадим отдельный файл media-queries.css, который подключим после основного стиля.

<link href="media-queries.css" rel="stylesheet" type="text/css">

Размер экрана меньше 992px

Открываем файл media-queries.css на редактирование, и напишем свое условие для дестопных экранов.

Начинаем с правила @media, скрываем стиле для браузеров которые их не поддерживают only, затем пишем носитель  screen и логический оператор and «И», далее условие максимально ширины в 992 пик. то есть если страничка будет меньше данной ширины тогда применим наши стили.

Затем, в фигурных  скобках описываем стили для данного расширения:

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

Ширину обертки уменьшим на 750 пик.

.wrapper  {
	width: 750px;
}

Поменяем у блоков цвет, а у footer немного уменьшим высоту:

.wrapper  {
        width: 750px;
    }
    .header {
        background: #a1ece5;
    }
    .top_menu {
        background: #64f1eb;
    }
    .sideLeft {
        background: #80e47e;
    }
    .content {
        background: #f0f1ef;
    }
    .footer {
        background: #9ea424;
        height: 45px;
    }
}

Размер экрана меньше 768px

Затем опишем медеа запрос для средних экранов, таких как планшеты. Я скопирую предыдущий стили, заменю максимальную ширину на 768 пик. и в нем опишу стили для данного расширения экрана.

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}

Обертку уменьшаем до 450 пик.

.wrapper  {
	width: 450px;
}

У header поменяем цвет, его высоту, и сделаем радиус в 3 пик.

.header {
	background: #86ebff;
	height: 100px;
	border-radius: 3px;
}

Тоже самое проделаем с top_menu

.top_menu {
	background: #2ca9b7;
	margin-top: 4px;
	height: 25px;
}

Левый сайт бар, меняем цвет, делаем по всей ширине, уменьшаем отступ до 4 пик. убираем обтекание.

.sideLeft {
	background: #5ab37f;
	width: 100%;
	margin-top: 4px;
	float: none;
}

Для наглядности добавим в сайт бар дополнительные блоки и оформим их надлежащим образом.

<div class="sideLeft">
	<div class="bar"></div>
	<div class="bar"></div>
	<div class="bar"></div>
</div>

Убираем высоту .sideLeft

.bar {
    background: #a5fdcf;
    border-radius: 5px;
    border: 1px solid #129d52;
    margin: 3px auto;
    width: 95%;
    height: 110px;
}

Для блока под контент, меняем цвет, делаем ширину в 100%, отступ в 4 пик, уменьшаем высоту и убираем обтекание.

.content {
	background: #dbdddb;
	width: 100%;
	margin-top: 4px;
	height: 250px;
	float: none;
}

Затем footer немного уменьшим по высоте, цвет и отступ немного подкорректируем:

.footer {
	background: #758430;
	margin-top: 4px;
	height: 35px;
}

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

<div class="knopka">
	<div class="lan"></div>
	<div class="lan"></div>
	<div class="lan"></div>
</div>

Затем опишем общие стили, и скроем их:

.top_menu {
    background: #87c5ff;
    width: 100%;
    margin-top: 5px;
    height: 50px;
    position: relative;
}
.knopka {
    display: none;
    width:32px;
    height: 21px;
    top: 2px;
    left: 6px;
    background: #6d6e6d;
    border-radius: 2px;
    position: absolute;
}
.lan {
    width: 29px;
    height: 3px;
    background: #2b2828;
    margin: 3px auto;
}

Размер экрана меньше 480px

Затем опишем стили под маленькие расширения экранов которые подходят под мобильные устройства.

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

}

Делаем обертку в 320 пик.

.wrapper  {
	width: 320px;
}

У остальных блоков поменяем цвет.

.header {
        background: #3dfff2;
    }
    .top_menu {
        background: #328e8d;
    }
    .sideLeft {
        background: #91b399;
    }
    .content {
        background: #f2f4f2;
    }
    .footer {
        background: #6d6e6d;
    }
}

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

* {
    transition: all .2s;
}

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

<div class="content"></div>
<div class="sideLeft">
	<div class="bar"></div>
	<div class="bar"></div>
	<div class="bar"></div>
</div> 

Подключаем Media Queries Javascript

Медио запросы не поддерживаются браузером Internet Explorer 8 и более ранних версий, для них нужно подключить дополнительный Javascript файл css3-mediaqueries.js.

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->  

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