[英]CSS Media query not responding with jquery
我创建了一个媒体查询,用于查询屏幕的宽度何时小于415像素,文本变小,以及广告汉堡包菜单。 但是我正在用“名称”变量对其进行测试,并且它没有响应。 我在过去的2-3个小时中一直在对此进行研究,但找不到有效的答案。 我在想,也许j查询阻止了它的工作,因为我只有在单击导航按钮时才将“名称”变量设置为隐藏。 这是我的代码。 其余的将在代码笔https://codepen.io/anon/pen/OppaYP中
HTML
<!-- Section for Jobs Popup -->
<div id="jobs-popup">
<img id="x-icon1" src="Pictures/web%20x%20icon%20white.png">
<div class="jobs-content">
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
</div>
</div>
<!--End Section for Jobs Popup -->
<!-- Section for contact popup -->
<div id="contact-popup">
<img id="x-icon2" src="Pictures/web%20x%20icon%20white.png">
<div id="contact-content">
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
</div>
</div>
<!-- End Section for Contact Popup -->
<!-- Section for Press popup -->
<div id="press-popup">
<img id="x-icon3" src="Pictures/web%20x%20icon%20white.png">
<div id="press-content">
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
</div>
</div>
<!-- End section Press -->
<!-- Section for legal popup -->
<div id="legal-popup">
<img id="x-icon4" src="Pictures/web%20x%20icon%20white.png">
<div id="legal-content">
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
</div>
</div>
<!-- End section Legal -->
<!-- Section for Support -->
<div id="support-popup">
<img id="x-icon5" src="Pictures/web%20x%20icon%20white.png">
<div id="support-content">
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
</div>
</div>
<center><div id="top-bar">
<a class="burger-nav"></a>
<div id="nav-bar">
<ul>
<a href="#" id="jobs" class="test"><li class="nav-list" id="job-under">Jobs</li></a>
<a href="#" id="contact" class="test"><li class="nav-list" id="contact-under">Contact</li></a>
<a href="#" id="press" class="test"><li class="nav-list" id="press-under">Press</li></a>
<a href="#" id="legal" class="test"><li class="nav-list" id="legal-under">Legal</li></a>
<a href="#" id="support" class="test" ><li class="nav-list" id="support-under">Support</li></a>
</ul>
</div>
</div>
<div id="container">
<ul id="menu">
</ul>
<h1 id="name">Touch</h1>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>
CSS
@media screen and (max-width: 1024px) {
.bubbles{
visibility: hidden;
}
}
@media screen and (max-width: 415px) {
#name{
font-size: 2em;
}
}
#top-bar{
max-width:100%;
max-height: 7% ;
margin: 0 auto;
background-color: #FFFFFF;
}
#container{
width: 100%;
height: 100%;
margin: 0 auto;
background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
position: relative;
overflow: hidden;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
color:#262626;
overflow: hidden;
}
ul {
list-style: none;
top:9%;
}
.nav-list{
float: left;
font-size: 1.2em;
padding-right: 1%;
font-weight: bold;
margin: 2%;
}
/*Reg bubbles section -------------------------------------------- */
.bubbles{
position: absolute;
top:0;
left:0;
width:100%;
height: 100%;
z-index:0;
transform:translateZ(0);
}
.bubbles li{
position: absolute;
list-style: none;
display: block;
border-radius: 100%;
-ms-animation: fadeAndScale 33s ease-in infinite;
-webkit-animation: fadeAndScale 33s ease-in infinite;
-moz-animation: fadeAndScale 33s ease-in infinite;
-o-animation: fadeAndScale 33s ease-in infinite;
transition-timing-function: linear;
}
/* The first Circle animation------------------------------------------------------------------------------------------------ */
.bubbles li:nth-child(1) {
width: 9%;
height: 20%;
top:20%;
left: 20%;
background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
animation-name: firstCircle;
}
/* Mozilla First Circle Animation */
@-moz-keyframes firstCircle {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(200);
}
}
/* Webkit First Circle Animation */
@-webkit-keyframes firstCircle {
0% {
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(200);
}
}
@-ms-keyframes firstCircle {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(200);
}
}
/* End first circle animation -------------------------------------------------------------------------------------- */
/* Begin Second Circle Animation ------------------------------------------------------------------------------------ */
.bubbles li:nth-child(2) {
width: 9%;
height: 20%;
position: absolute;
left: 40%;
top:40%;
animation-name: secondAnimation;
}
/* Webkit Second Animation */
@-webkit-keyframes secondAnimation {
0% {
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(200);
}
}
/* Mozilla Second Animation */
@-moz-keyframes secondAnimation {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(200);
}
}
/* Ms Second Animation */
@-ms-keyframes secondAnimation {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(200);
}
}
/* End of Second Circle ------------------------------------------------------------------------------------- */
/*Begin of Third Circle ----------------------------------------------------------------------------------- */
.bubbles li:nth-child(3) {
width: 9%;
height: 20%;
position: absolute;
left: 60%;
top:10%;
animation-name: thirdAnimation;
}
/* Webkit Third Animation */
@-webkit-keyframes thirdAnimation {
0% {
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(200);
}
}
/* Mozilla Third Animation */
@-moz-keyframes thirdAnimation {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(200);
}
}
/* MS Third Animation */
@-ms-keyframes thirdAnimation {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(200);
}
}
/* End of the Third Circle --------------------------------------------------------------------------------------------------------- */
/* Begin of Fourth Circle Animation ----------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(4) {
width: 9%;
height: 20%;
position: absolute;
left: 10%;
top:60%;
animation-name: fourthAnimation;
}
/* Webkit Fourth Animation */
@-webkit-keyframes fourthAnimation {
0% {
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(200);
}
}
/* Mozilla Fourth Animation */
@-moz-keyframes fourthAnimation {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(200);
}
}
/* MS Fourth Animation */
@-ms-keyframes fourthAnimation {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(200);
}
}
/* END of Fourth Animation ------------------------------------------------------------------------------------------------ */
/* Start of Fifth Animation -------------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(5) {
width: 9%;
height: 20%;
position: absolute;
left: 50%;
top:10%;
animation-name: fifthAnimation;
}
/* Webki Fifth Animation */
@-webkit-keyframes fifthAnimation {
0% {
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(200);
}
}
@-moz-keyframes fifthAnimation {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(200);
}
}
@-ms-keyframes fifthAnimation {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(200);
}
}
/* End of the Fith Circle ----------------------------------------------------------------------------------------------------- */
/* Start of the Sixth Circle ------------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(6) {
width: 9%;
height: 20%;
position: absolute;
left: 80%;
top:60%;
animation-name: sixthAnimation;
}
/* Webkit sixth animation */
@-webkit-keyframes sixthAnimation {
0% {
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(200);
}
}
/* Mozilla Sixth Animation */
@-moz-keyframes sixthAnimation {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(200);
}
}
/* MS Sixth Animation */
@-ms-keyframes sixthAnimation {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(200);
}
}
/* End of Sixth Animation ---------------------------------------------------------------------------------------------- */
#name{
color:white;
font-size: 6em;
position: relative;
top:30%;
text-shadow: 2px 2px grey;
z-index: 10;
}
#jobs li{
color:#262626;
}
#contact li{
color:#262626;
}
#press li{
color:#262626;
}
#legal li{
color:#262626;
}
#support li{
color:#262626;
}
#jobs-popup{
width: 100%;
height: 90%;
margin-top:5%;
position: fixed;
z-index: 10;
top:0;
left:0;
overflow-y: hidden;
}
.jobs-content{
width: 600px;
height: 560px;
margin: 20 auto;
position: relative;
top:0;
left:0;
background-color: white;
word-wrap: break-word;
overflow: auto;
z-index: 100;
display: none;
}
#x-icon1{
width:80px;
height: 80px;
position: absolute;
left:10%;
top:4%;
cursor: pointer;
display: none;
}
.whip{
margin: 0 auto;
color: black;
display: none;
}
#contact-popup {
width: 100%;
height: 90%;
margin-top:5%;
position: fixed;
z-index: 10;
top:0;
left:0;
overflow-y: hidden;
}
#contact-content{
width: 600px;
height: 560px;
margin: 20 auto;
position: relative;
top:0;
left:0;
background-color: white;
word-wrap: break-word;
overflow: auto;
z-index: 100;
display: none;
}
#x-icon2{
width:80px;
height: 80px;
position: absolute;
left:10%;
top:4%;
cursor: pointer;
display: none;
}
#press-popup{
width: 100%;
height: 90%;
margin-top:5%;
position: fixed;
z-index: 10;
top:0;
left:0;
overflow-y: hidden;
}
#press-content{
width: 600px;
height: 560px;
margin: 20 auto;
position: relative;
top:0;
left:0;
background-color: white;
word-wrap: break-word;
overflow: auto;
z-index: 100;
display: none;
}
#x-icon3{
width:80px;
height: 80px;
position: absolute;
left:10%;
top:4%;
cursor: pointer;
display: none;
}
#legal-popup{
width: 100%;
height: 90%;
margin-top:5%;
position: fixed;
z-index: 10;
top:0;
left:0;
overflow-y: hidden;
}
#legal-content{
width: 600px;
height: 560px;
margin: 20 auto;
position: relative;
top:0;
left:0;
background-color: white;
word-wrap: break-word;
overflow: auto;
z-index: 100;
display: none;
}
#x-icon4{
width:80px;
height: 80px;
position: absolute;
left:10%;
top:4%;
cursor: pointer;
display: none;
}
#support-popup{
width: 100%;
height: 90%;
margin-top:5%;
position: fixed;
z-index: 10;
top:0;
left:0;
overflow-y: hidden;
}
#support-content{
width: 600px;
height: 560px;
margin: 20 auto;
position: relative;
top:0;
left:0;
background-color: white;
word-wrap: break-word;
overflow: auto;
z-index: 100;
display: none;
}
#x-icon5{
width:80px;
height: 80px;
position: absolute;
left:10%;
top:4%;
cursor: pointer;
display: none;
}
稍后声明的CSS规则优先于先前声明的CSS规则,并且媒体查询不会添加优先级,因此它不起作用,因为
@media screen and (max-width: 415px) {
#name{
font-size: 2em;
}
}
来之前
#name{
color:white;
font-size: 6em;
position: relative;
top:30%;
text-shadow: 2px 2px grey;
z-index: 10;
}
在您的文件中。 将媒体查询移至另一条规则之后,它将起作用。
而且您在js中编写了很多不需要的js,可以通过css3完成很多操作,尝试这样做,这样可以节省浏览器绘制页面的时间
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.