Доброго времени суток дорогие друзья. C развитием интернета и появлением различных устройств появилась необходимость в поддержке отображения сайтов на разных разрешениях. И выходом из этой ситуации стал адаптивный дизайн который подразумевает, что исходный макет сайта будет отображаться удобно и читаемо на всех разрешениях экрана. И именно для этого и были разработаны медиа - запросы которые в буквальном смысле слова позволяют перестраивать(адаптировать) сайт под различные разрешения.
Для того чтобы использовать медиа- запросы нужно прописать в теге head следующий мета тег:
<meta name="viewport" content="width=device-width, initial-scale=1">после этого мы смело можем приступать к написанию нашего первого медиа запроса.
Допустим у нас есть следующий код:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Медиа запросы
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<style>
#text:before {
Content:"Разрешение для экранов больше 1200px(Компьютер, телевизор, ноутбуки)";
}
@media screen and (max-width: 1200px) {
#text:before {
Content:"Разрешение для экранов до 1200px (ноутбуки)";
}
}
@media screen and (max-width: 800px) {
#text:before {
Content:"Разрешение для экранов до 800px(планшеты)";
}
}
@media screen and (max-width: 320px) {
#text:before {
Content:"Разрешение для экранов до 800px(смартфоны)";
}
}
</style>
<span id="text"></span>
</body>
</html>здесь мы написали три медиа запроса которые с помощью псевдоселектора before сменяют сообщение при изменении разрешений. Как вы наверное уже догадались первый медиа запрос срабатывает на отметке в 1200px, затем второй на 800px и третий на отметке 320px.
Для того чтобы увидеть эффект изменений при смене разрешения экрана мы можем поступить двумя способами первый, это нажимая горячую клавишу ctrl + + и тем самым постепенно уменьшая разрешение. А второй зайти в инструменты разработчика в браузере и найти опцию при которой мы можем регулировать разрешения экрана в ручную. Я пользуюсь браузером google chroome поэтому нажимаю горячую клавишу ctrl+shift+j переходя в консоль и верхнем меню слева от слова console кликаю на значок в виде экранов. И в результате вверху отображается текущее разрешение экрана и я теперь могу используя мышку менять разрешение экрана, тем самым наблюдая как срабатывают медиа запросы.
Давайте теперь поподробнее разберем структуру медиа запроса:
@media screen and (max-width: 1200px) {
/*Стили css */
}все медиа - запросы начинаются с ключевого слова @media screen and затем в скобочках у нас идет максимальная ширина разрешения больше которой медиа запрос не срабатывает.
То есть, если наше разрешение экрана больше 1200px, то данный медиа запрос выполняться не будет. Если мы вместо max-width в медиа запросе напишем min-width:
@media screen and (min-width: 1200px) {
/*Стили css */
}здесь будет обратная ситуация, данный медиа запрос будет выполняться если разрешение экрана не меньше 1200px. Под стилями css в медиа запросах подразумеваются селекторы и их свойства css.
@media screen and (max-width: 1200px) {
body{
background:green;
}
}здесь прописано что если разрешение экрана меньше 1200px фон тега body становиться зеленным.
Мы можем также задавать интервал:
@media screen and (min-width: 800px) and (max-width: 1200px) {
body{
background:green;
}
}тут зеленый фон к тегу body применяется в интервале разрешения ширины от 800px до 1200px.
И напоследок давайте с вами рассмотрим еще одну из возможностей которую предоставляют нам медиа запросы, а именно подключение файлов css при изменении разрешений:
<link rel="stylesheet" media="screen and (max-width: 1200px)" href="media.css">эта строчка прописывается в теге head, в атрибуте media указывается условие медиа запроса, а href путь к css файлу который будет подключен при выполнении условия медиа запроса.
В нашем случае при разрешении экрана меньше 1200px на нашу страницу будут подключаться стили расположенные в файле media.css
На этом дорогие друзья я с вами прощаюсь, надеюсь данная статья была для вас полезна.
Желаю удачи и успехов, как в жизни так и в программировании. Пока!
