media запросы

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

Как это работает?

Как же работает медиа запрос? - По факту, он просто изменяет указанные css-стили в зависимости от указанного свойства.

Почему нельзя использовать js функции для масштабирования блоков? - медиа запрос работает мгновенно, в то время как js сначала подгрузить оригинал и только потом его видоизменит

Синтаксис

Медиа запросы прописываются в css файле и имеют довольно логичный синтаксис

@media (свойство) {
    .классы блоков для изменения
}

В целом, все интуитивно понятно. Ключевое слово @madia для объявления запроса, в скобах указывается свойство в зависимости от которого будут меняться стили( в данной статьей мы рассмотрим вариант бального масштабирования, поэтому будем использовать свойство max-width: n px )

Ну а в теле запроса указываются стили для определенных html-объектов.

Практика

Теперь предлагаю использовать наши знания на практике, сверстав адаптивное меню

P.s. код использован из моей последней работы

Разбираться верстку и стили я не вижу смысла поэтому просто покажу исходный код

html:

<header>
    <div class="container">
        <nav class="menu">
            <ul>
                <li><div class="logo"><a href="/">G3</a></div></li>
                <li class="menuelems"><a href="/news">Новости</a></li>
                <li class="menuelems"><a href="http://">Информация</a></li>
                <li class="menuelems"><a href="http://">Учительская</a></li>
                <li class="menuelems"><a href="http://">Наша жизнь</a></li>
                <li class="menuelems"><a href="http://">Стажировка</a></li>
                <li class="menuelems"><a href="http://">Медиацентр</a></li>
                <li class="menuelems"><a href="http://">Файлы</a></li>
                <li class="menuelems"><a href="http://">Прочее</a></li>
                <li class="hiddenmenu"><a href="http://"><img src="/static/img/shortmenu.png" alt=""></a></li>
            </ul>
       </nav>
   </div>
</header>

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

css:

header {
    background: rgb(00, 00, 00);
}
ul {
    display: flex;
    list-style-type: none;
}
.container {
    max-width: 1500px;    
    margin: auto 10%;    
    padding-top: 1.5%;    
    padding-bottom: 1.5%;
.menu ul li {
    list-style-type: none;    
    font-size: 17px;    
    width: 15%;    
    padding-right: 1.5%;    
    padding-left: 1.5%;    
    color: white;    
    text-align: center;    
    line-height: 100%;
}
.menu ul li a {
    line-height: none;    
    display: inline-block;    
    vertical-align: middle;    
    text-decoration: none;
}
.menuelems a {
    color: white;    
    font-family: 'Pacifico', serif;
}
.logo {
    font-size: 30px;    
    font-family: 'Mrs Sheppards', cursive;
}
.logo a {
    color: rgb(105,136,184);
}
.hiddenmenu {
    display: none;    
    float: right;
}
.hiddenmenu a {
    display: inline-block;
    width: 100%;
}
.hiddenmenu a img {
    width: 60%;
}

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

И так, что тут следует отметить:

• Во-первых, элемент с классом hiddenmenu. В обычно состоянии этого элемента не видно благодаря заданному параметру display: none
• Во-вторых, для удобства я задал всем элементам меню один стиль, чтобы у них не возникало трудностей с исчезновением

Теперь начинаем творить волшебство, объявляем media-запрос с условием max-width: 420px. Делать будем адаптив под мобильные устройства. То есть, если экран пользователя меньше или равен 420px( а это чуть больше чем ширина 8 plus ) то стили указанные в теле запроса будут применены.

@media (max-width: 420px ) {
   .menuelems {
       display: none;    
   }    
   .hiddenmenu {
       display: block;        
       margin-left: 55%;    
   }    
   .container {
       padding-top: 3%;        
       margin: auto;    
   }    
   .logo {        
       line-height: 100%;    
   }
}

Примерно так выглядит мой media-запрос, самое главное что здесь происходит - это изменение значения display у menuelems и у hiddenmenu. Как вы помните изначально hiddenmenu у нас был скрыт, а menuelems обладал свойством flex. Сейчас же мы немного изменили ситуацию и скрыли от пользователя menuelems, а вместо него проявили hiddenmenu

ВАЖНО

Медиа-запросы нужно всегда писать в конце css-файла.

Надеюсь я все понятно объяснил, а вот не посредственно результат нашего кода:

Если вам был интересен и полезен урок, то дайте знать фит-бэком)

Удачи, программисты!