javascript - 为什么我的 css 媒体查询不能正常工作?
问题描述
因此,我正在使用开发工具响应 chrome 的大小来使导航栏响应。正如您将在代码中看到的那样,我想将导航栏的最大宽度调整为 400 像素,尽管当我检查我正在调整的手机尺寸(手机 S 和手机 M)时,导航栏没有改变。这是问题的打印:
感谢任何帮助!
这是导航栏的代码:https ://jsfiddle.net/5syoxzch/
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.ulSecções');
const navLinks = document.querySelectorAll('.ulSecções li');
//Toggle Nav
burger.addEventListener('click', () => {
nav.classList.toggle('navActive');
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
*{
margin: 0;
padding: 0;
text-decoration: none;
}
/*Nav bar*/
/*Background Menu*/
nav.menu {
width:100%;
height: 85px;
background-color: rgb(24, 24, 24);
box-shadow: 0px 1px 16px 3px;
}
/*Costumização do body */
body {
background-color: rgb(255, 255, 255);
}
body .menu{
position:fixed;
z-index: 100;
}
/*Costumização logo */
.ulLogo li {
list-style: none;
}
.ulLogo li a img{
width: 180px;
float:left;
padding: 19px 0px 0px 60px;
}
/*Transição Logo Opacity*/
.ulLogo li a img#espiral:hover {
opacity: 0.7;
transition: opacity 300ms linear 0s;
}
.ulLogo li a img#espiral:not(:hover) {
opacity: 1;
transition: opacity 399ms linear 0s;
}
/*Costumização sections */
nav .ulSecções {
float: left;
padding-left: 90px;
}
nav ul.ulSecções li{
float: left;
list-style: none;
position: relative;
line-height: 90px;
}
nav ul.ulSecções li a{
text-decoration: none;
display:block;
font-family: "Ubuntu", "Palatino", sans-serif ;
color:rgb(192, 163, 68);
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.1em;
opacity: 0.9;
border: none;
background: none;
padding: 0px 18px;
}
nav ul.ulSecções li a i{
font-size: 15px;
padding-left: 3px;
visibility: hidden;
}
nav ul.ulSecções li a i#shop{
visibility: visible;
}
nav ul.ulSecções li a.loja{
font-weight: 800;
font-size: 14px;
letter-spacing: 0.1em;
}
/* Transition das anchors */
nav ul.ulSecções li a:hover {
color: rgb(255, 255, 255);
opacity: 1;
transition: color 150ms ease-in 0s,
opacity 150ms ease-in 0s;
}
nav ul.ulSecções li a:not(:hover) {
color: rgb(204, 174, 75);
opacity: 0.9;
transition: color 150ms ease-in 0s,
opacity 150ms ease-in 0s;
}
/*DropDowns*/
/*Dropdown Geral e Carla Ornelas*/
nav .ulSecções li ul.dropdown {
display: none;
position: absolute;
background-color: rgb(24, 24, 24);
border-radius: 1px 1px 6px 6px;
}
nav .ulSecções li ul.dropdown#dropdownCarlaOrnelas {
bottom: -195px;
}
nav .ulSecções li:hover ul.dropdown {
display: block;
}
nav .ulSecções li:hover ul.dropdown#dropdownCarlaOrnelas li {
width: 278px;
}
nav ul.ulSecções li ul.dropdown li a {
display: block;
line-height: 50px;
padding-right: 80px;
color: rgb(255, 255, 255);
font-family: "Lato", "Titillium Web", sans-serif;
letter-spacing: 0em;
font-size: 14px;
}
/*Dropdown Cursos*/
nav .ulSecções li ul.dropdown#cursos {
bottom: -45px;
}
nav .ulSecções li:hover ul.dropdown#cursos li {
width: 140px;
}
/*Dropdown Conteúdos*/
nav .ulSecções li ul.dropdown#conteúdos {
bottom: -45px;
}
nav .ulSecções li:hover ul.dropdown#conteúdos li {
width: 210px;
}
/*Dropdown Recursos*/
nav .ulSecções li ul.dropdown#recursos {
bottom: -145px;
}
nav .ulSecções li:hover ul.dropdown#recursos li {
width: 264px;
}
/*DropDown Transitions (text)*/
nav ul.ulSecções li ul.dropdown li a:hover {
color: rgb(190, 172, 100);
transition: color 150ms ease-in 0s;
letter-spacing: 0.1em;
transition: letter-spacing 150ms ease-in 0s;
}
/*Animation da Dropdown */
nav .ulSecções li:hover > ul.dropdown {
perspective: 1000px;
}
nav .ulSecções li:hover > ul.dropdown {
transform-origin: top center;
opacity:0;
}
nav .ulSecções li:hover > ul.dropdown:nth-child(1) {
animation: animate 300ms ease-in-out forwards;
animation-delay: -150ms;
}
nav .ulSecções li:hover > ul.dropdown:nth-child(2) {
animation: animate 300ms ease-in-out forwards;
animation-delay: 0ms;
}
nav .ulSecções li:hover > ul.dropdown:nth-child(3) {
animation: animate 300ms ease-in-out forwards;
animation-delay: 150ms;
}
nav .ulSecções li:hover > ul.dropdown:nth-child(4) {
animation: animate 300ms ease-in-out forwards;
animation-delay: 300ms;
}
nav .ulSecções li:hover > ul.dropdown:nth-child(5) {
animation: animate 300ms ease-in-out forwards;
animation-delay: 450ms;
}
/*li animation Part*/
nav .ulSecções li:hover > ul.dropdown li {
transform-origin: top center;
opacity:0;
}
nav .ulSecções li:hover > ul.dropdown li:nth-child(1) {
animation: animate 300ms ease-in-out forwards;
animation-delay: -150ms;
}
nav .ulSecções li:hover > ul.dropdown li:nth-child(2) {
animation: animate 300ms ease-in-out forwards;
animation-delay: 0ms;
}
nav .ulSecções li:hover > ul.dropdown li:nth-child(3) {
animation: animate 300ms ease-in-out forwards;
animation-delay: 150ms;
}
nav .ulSecções li:hover > ul.dropdown li:nth-child(4) {
animation: animate 300ms ease-in-out forwards;
animation-delay: 300ms;
}
nav .ulSecções li:hover > ul.dropdown li:nth-child(5) {
animation: animate 300ms ease-in-out forwards;
animation-delay: 450ms;
}
/*Mobile Nav Bar*/
.show, input{
display: none;
}
.burger{
display: none;
float: right;
padding: 31px 49px;
cursor: pointer;
}
.burger div{
width: 27px;
height: 3px;
margin: 5px;
background-color: rgb(192, 163, 68);
transition: all 0.3s ease;
border-radius: 2px;
}
@keyframes animate{
0%{
opacity: 0;
transform: rotateX(-90deg);
}
50%{
transform: rotateX(20deg);
}
100%{
opacity: 1;
transform: rotateX(0deg);
}
}
@keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
/*Toggle burger*/
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px);
}
/*Mobile screen adjustments*/
/*Mobile S*/
@media screen and (max-width: 400px){
body{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/*Nav bar*/
nav.menu {
width:100%;
height: 140px;
}
.ulLogo li {
margin-left: 25%;
}
.ulLogo li a img {
width: 400px;
}
.ulSecções {
position: absolute;
right: 0px;
height: 51vh;
top: 139px;
background-color: rgba(0, 0, 0, 0.9);
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
overflow: scroll;
transform: translateX(100%);
transition: transform 400ms ease-out 0s;
}
nav ul.ulSecções li a{
font-size: 35px;
text-align: center;
padding: 18px;
}
nav ul.ulSecções li a.loja{
font-size: 35px;
}
nav ul.ulSecções li a i{
font-size: 35px;
visibility: visible;
}
/*Dropdowns*/
nav .ulSecções li ul.dropdown {
display: none;
position: absolute;
width: 500px;
background-color: rgb(24, 24, 24);
border-radius: 1px 1px 6px 6px;
}
/*carla ornelas*/
nav .ulSecções li ul.dropdown#dropdownCarlaOrnelas {
bottom: 30px;
position: relative;
left: 30px;
}
nav .ulSecções li:hover ul.dropdown#dropdownCarlaOrnelas li {
width: 500px;
}
/*Dropdown Cursos*/
nav .ulSecções li ul.dropdown#cursos {
bottom: 25px;
position: relative;
left: 30px;
}
nav .ulSecções li:hover ul.dropdown#cursos li {
width: 500px;
}
/*Dropdown Conteúdos*/
nav .ulSecções li ul.dropdown#conteúdos {
bottom: 20px;
position: relative;
left: 30px;
}
nav .ulSecções li:hover ul.dropdown#conteúdos li {
width: 500px;
}
/*Dropdown Recursos*/
nav .ulSecções li ul.dropdown#recursos {
bottom: 10px;
position: relative;
left: 30px;
}
nav .ulSecções li:hover ul.dropdown#recursos li {
width: 500px;
}
nav ul.ulSecções li ul.dropdown li a {
position: relative;
display: block;
line-height: 35px;
padding-right: 80px;
color: rgb(255, 255, 255);
font-family: "Ubuntu", "Palatino", sans-serif;
letter-spacing: 0.1em;
font-size: 28px;
text-align: center;
}
/*Burger*/
div.burger{
display: block;
padding-right: 100px;
padding-top: 57px;
}
.burger div{
width: 40px;
height: 5px;
margin: 4px;
}
}
.navActive{
transform: translateX(0%)
}
<!--Nav Bar-->
<header>
<nav class="menu">
<div>
<ul class="ulLogo">
<li><a href="#" title="Carla Ornelas Logo"> <img src="../Logo-(3).png"/> </a></li>
</ul>
</div>
<div>
<ul class="ulSecções">
<li> <a href="../Main page/index.html" title="Home">Home</a> </li>
<li class="carla"> <a class="carlaOrnelas" href="#" title="Carla Ornelas">Carla Ornelas</a>
<ul class="dropdown" id="dropdownCarlaOrnelas">
<li><a href="/Carla Ornelas/sobre.html" title="Sobre">Sobre</a></li>
<li><a href="/Carla Ornelas/programas.html" title="Empowered Women">Empowered Women</a> </li>
<li><a href="" title="Cadastro">Cadastro</a> </li>
<li><a href="/Carla Ornelas/depoimentos.html" title="Depoimentos">Depoimentos</a> </li>
</ul>
</li>
<li><a href="#" title="Cursos">Cursos</a>
<ul class="dropdown" id="dropdownProgramas">
<li><a href="" title="Online">Online</a></li>
</ul>
</li>
<li><a href="" title="Blog">Blog</a></li>
<li> <a href="" title="Contatos">Contatos</a> </li>
<li> <a href="" title="Acesse a nosa loja" class="loja">Loja <i class="fa fa-shopping-cart" aria-hidden="true"></i> </a></li>
</ul>
</div>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
解决方案
确保在您的内部提供此元标记<head></head>
以防止错误。
<meta name="viewport" content="width=device-width, initial-scale=1">
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
推荐阅读
- security - 使用密码最大限制的网站是否以纯文本形式存储密码?
- python - Scrapy蜘蛛完成抓取的时间如何写入json文件?
- node.js - 如何使用 node.js 编辑 json 文件
- python - 如何在curses的文本框中添加滚动?
- grafana - Grafana mysql 多值变量
- javascript - 从 Api 获取数据并在 react js 中使用钩子
- prometheus - 获取最后一个警报值
- r - 图例未出现在 R 图中
- docker - 从 Dockerfile 将 ENV 传递给图像父级很热
- sublimetext3 - 如何更新 Sublime Text 3 以使用 Python 3.10 语法