CSS媒体查询没有响应jquery
我创建了一个媒体查询，当屏幕宽度达到415px以下时，文字会变小，我也会在汉堡菜单上添加。但我正在测试它与“名称”变量，它没有响应。我在过去2-3小时内研究过这个问题，但我找不到一个有效的答案。我在想，也许j查询会阻止它工作，因为我将“name”变量设置为仅在单击导航按钮时隐藏。这是我的代码。其余的将在代码笔中
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;
}
2 个答案:
答案 0 :(得分：0)
稍后声明的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;
}
在你的档案中。将媒体查询移到另一个规则之后，它将起作用。
答案 1 :(得分：0)
而且你也写了很多不需要js的js，很多可以通过css3来完成，试试这个，这样可以节省浏览器绘制页面的时间
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？