不使用jquery响应的CSS媒体查询
不使用jquery响应的CSS媒体查询
提问于 2017-03-10 17:59:47
我创建了一个媒体查询，当屏幕宽度小于415 of时，文本变得更小，我还会添加一个汉堡包菜单。但我正在用"name“变量测试它，它没有响应。在过去的2-3个小时里，我一直在研究这个问题，但我找不到一个有效的答案。我在想，也许j查询阻止了它的工作，因为只有单击导航按钮时，才会将“name”变量设置为隐藏。这是我的密码。其余的将在代码笔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;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-03-10 18:04:49
稍后声明的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;
}在你的档案里。将媒体查询移到另一个规则之后，它将工作。
Stack Overflow用户
发布于 2017-03-10 18:14:00
此外，您还可以在js中编写大量不需要的js，这些都可以通过css3来完成，这将节省您的浏览器绘制页面的时间。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42724903
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号