Почему не работает Медиа запрос?
<header class="header"> <div class="container header__container"> <div class="row"> <div class="col-12 header__content"> <div class="header__menu" id="burger"> <span class="menu__span"></span> <span class="menu__span"></span> <span class="menu__span"></span> </div> <svg class="header__svg" width="94" height="21" viewBox="0 0 94 21" fill="none" xmlns="http://www.w3.org/2000/svg"> </svg> <div class="header__block" id="menu"> <nav class="header__nav"> <ul class="header__list"> <li class="header__item"> <a href="#" class="header__link"> Главное </a> </li> <li class="header__item"> <a href="#" class="header__link"> О нас </a> </li> <li class="header__item"> <a href="#" class="header__link"> Преподаватели </a> </li> <li class="header__item"> <a href="#" class="header__link"> Курсы </a> </li> </ul> </nav> </div> </div> </div> </div> </header> |
<header class="header"> <div class="container header__container"> <div class="row"> <div class="col-12 header__content"> <div class="header__menu" id="burger"> <span class="menu__span"></span> <span class="menu__span"></span> <span class="menu__span"></span> </div> <svg class="header__svg" width="94" height="21" viewBox="0 0 94 21" fill="none" xmlns="http://www.w3.org/2000/svg"> </svg> <div class="header__block" id="menu"> <nav class="header__nav"> <ul class="header__list"> <li class="header__item"> <a href="#" class="header__link"> Главное </a> </li> <li class="header__item"> <a href="#" class="header__link"> О нас </a> </li> <li class="header__item"> <a href="#" class="header__link"> Преподаватели </a> </li> <li class="header__item"> <a href="#" class="header__link"> Курсы </a> </li> </ul> </nav> </div> </div> </div> </div> </header>
.header { background-color: var(--blue); } .header__container { padding-top: 29px; padding-bottom: 29px; } .header__content { display: flex; justify-content: space-between; } .header__svg { flex-shrink: 0; } .header__list { display: flex; justify-content: center; } .header__item:not(:last-child) { margin-right: 57px; } .header__link { color: var(--white); font-size: 18px; font-style: normal; font-weight: 400; line-height: normal; } .header__menu { display: none; position: absolute; background-color: inherit; left: 4%; min-width: 40px; min-height: 24px; cursor: pointer; z-index: 10; border: none; outline: none; } .menu__span { position: absolute; background-color: #fff; width: 25px; height: 2px; left: 0; transition: transform .3s ease-in-out ,opacity .1s ease-in-out, background-color .1s ease-in; will-change: transform; } .menu__span:first-child { transform: translateY(-10px); } .menu__span:nth-of-type(3) { transform: translateY(10px); } /* Rect */ .header.open .menu__span:first-child { transform: translateY(0) rotate(45deg); } .header.open .menu__span:nth-of-type(2) { opacity: 0; } .header.open .menu__span:nth-of-type(3) { transform: translateY(0) rotate(-45deg); } .header__menu:active .menu__span { background-color: black; } @media (max-width: 767px) { /* Header */ .header__content { flex-direction: column; align-items: center; } .header__block { margin-top: 32px; } .header__item:not(:last-child) { margin-right: 30px; } |
.header { background-color: var(--blue); } .header__container { padding-top: 29px; padding-bottom: 29px; } .header__content { display: flex; justify-content: space-between; } .header__svg { flex-shrink: 0; } .header__list { display: flex; justify-content: center; } .header__item:not(:last-child) { margin-right: 57px; } .header__link { color: var(--white); font-size: 18px; font-style: normal; font-weight: 400; line-height: normal; } .header__menu { display: none; position: absolute; background-color: inherit; left: 4%; min-width: 40px; min-height: 24px; cursor: pointer; z-index: 10; border: none; outline: none; } .menu__span { position: absolute; background-color: #fff; width: 25px; height: 2px; left: 0; transition: transform .3s ease-in-out ,opacity .1s ease-in-out, background-color .1s ease-in; will-change: transform; } .menu__span:first-child { transform: translateY(-10px); } .menu__span:nth-of-type(3) { transform: translateY(10px); } /* Rect */ .header.open .menu__span:first-child { transform: translateY(0) rotate(45deg); } .header.open .menu__span:nth-of-type(2) { opacity: 0; } .header.open .menu__span:nth-of-type(3) { transform: translateY(0) rotate(-45deg); } .header__menu:active .menu__span { background-color: black; } @media (max-width: 767px) { /* Header */ .header__content { flex-direction: column; align-items: center; } .header__block { margin-top: 32px; } .header__item:not(:last-child) { margin-right: 30px; }
Медиа запрос по факту применяется но не на том пикселе который указан в запросе,а на пиксель ниже.Т.е свойства в данном запросе применяются на ширине экрана 766 пикселей.В медиа меняю ширину делаю 766 стили применяются на 765-ом пикселе,но интересное то что на брейкпойнте 992 пикселя у меня все работает как надо,начиная с максимальной ширины 992.И в devtools даже не показывает что у меня есть медиа запрос.Мета,вюпорт проверял,опечатки проверял,подключен бутстрап,вложенность по классам не делал вроде
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Чтобы понять, почему медиа-запрос не работает, нужно убедиться, что код написан правильно и все условия выполнены.
Во-первых, убедитесь, что медиа-запрос написан корректно. Например, если вы хотите применить стили для экранов с шириной менее 768px, то ваш медиа-запрос должен выглядеть примерно так:
@media only screen and (max-width: 768px) { /* Ваши стили здесь */ }
Убедитесь, что вы используете правильные значения ширины (max-width, min-width) и правильные единицы измерения (px, em, % и т.д.).
Во-вторых, убедитесь, что ваш медиа-запрос находится в правильном месте. Он должен быть помещен в конце вашего CSS файла, после всех других стилей. Это гарантирует, что медиа-запрос будет применяться к элементам после того, как они уже получили другие стили.
Также убедитесь, что ваш CSS файл подключен к HTML документу с помощью тега в секции.
Если после всех этих проверок медиа-запрос все равно не работает, возможно, у вас есть другие стили, которые переопределяют стили в медиа-запросе. В этом случае, убедитесь, что правила медиа-запроса имеют достаточный приоритет или используйте !important для переопределения других стилей.
Также полезно использовать инструменты разработчика браузера для проверки, применяются ли стили из медиа-запроса и почему они могут быть переопределены.
Надеюсь, эти советы помогут вам решить проблему с медиа-запросом. Если у вас остались вопросы, не стесняйтесь задавать их!