0
我創建了一個媒體查詢，當屏幕寬度小於415px，文本變小時，我也會做一個漢堡菜單。但我正在用「名稱」變量進行測試，並且沒有響應。我正在研究這個過去2-3小時，我找不到一個有效的答案。我在想，也許j查詢阻止它工作，因爲我有「名稱」變量設置爲隱藏只有當導航按鈕被點擊。這是我的代碼。其餘部分將在代碼筆，稍後宣佈優先於那些先前宣佈，和媒體查詢不要 https://codepen.io/anon/pen/OppaYPCSS媒體查詢沒有響應jquery
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;
}
的瀏覽器時，有一個JavaScript錯誤。看你的瀏覽器控制檯 –