Отзывчивая верстка с помощью медиа-запросов

Отзывчивая верстка с помощью медиа-запросов

Всем привет!!!

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

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

Так что такое медиа-запросы (media query) и для чего необходимы?

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

Медиа-запрос должен начинаться с правила @media. Мы можем указать тип медианосителя, если вам это конечно необходимо. Но обычно этого не делают и по умолчанию тип медианосителя – это screen. Но если мы указали тип носителя, то после этого мы должны указать and. Далее мы должны указать характеристику медианосителя – min-width, max-width, min-width-device и т. д. Все доступные характеристики медианосителей вы можете посмотреть вот здесь.

Допустим мы хотим применить набор стилей при области просмотра меньше 768px, то для этого мы должны написать следующий медиа-запрос:

@media (max-width: 768px) { body { font-size:16px; color:#fff;

}

}

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

@media screen and (max-width:768){

/* css правила */

}

Все стили которые будут описаны внутри этого медиа-запроса будут применяться для области просмотра меньше 768 px. Если ширина области больше 768px, то данные стили не будут применяться.

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

Если мы хотим задать соответствующие правила CSS, для смартфонов, планшетов, для декстопов, то мы должны написать следующие медиа-запросы.

/* тут будут стили для смартфонов*/

@media (max-width:768){

// Тут будут стили

}

/* Для планшетов*/

@media (max-width:992px) {

// Тут будут стили

}

/* Для декстопов */

@media (max-width:992px) {

// Тут будут стили

}

<br>

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

Спасибо за внимание. Приятного серфинга.


Карта сайта


Информационный сайт Webavtocat.ru