【发布时间】：2020-12-31 18:11:21
【问题描述】：
我使用 Media Query 创建了一个断点，汉堡图标将消失，但它会快速跳转到第一个 breakpoint(345px) 到 second one(480px) 之间的位置。我想要做的是使图标平滑移动。我认为问题在于我影响了每个断点中的图标position: absolute; top ***px; left***px。我想删除它，但如果我删除它，单击时汉堡图标会移动。
谁能帮帮我，好吗？
index.php
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mobile.css" media="screen and (max-width:480px)">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light" style="">
<div class="container">
<a href="index.php" class="navbar-brand">
<h4 class="d-inline align-middle">Joey Namiki</h4>
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="index.php" class="nav-link active">Work</a>
</li>
<li class="nav-item">
<a href="about.php" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="http://joeynamiki.com/work/skills.php" class="nav-link">Skills</a>
</li>
<li class="nav-item">
<a href="http://joeynamiki.com/workj/index.php" class="nav-link">JP</a>
</li>
</ul>
</div><!-- </container> -->
</nav>
<!-- SHOWCASE-->
<section id="showcase" class="py-5">
<div class="container">
<div class="row">
<div class="col-lg-6 text-center lightUp comeOut1">
<div class="projectImage1">
<a href="project.php"><img src="img/image1.jpg" alt="" class="img-fluid mb-3"></a>
</div>
<p class="caption1">FEELGOOD.etc: Web Design</p>
</div><!-- col-lg-6 -->
<div class="col-lg-6 text-center lightUp comeOut2">
<div class="projectImage2">
<a href="project3.php"><img src="img/picture1.jpg" alt="" class="img-fluid mb-3"></a>
</div>
<p class="caption2">GoFind.ai: UX/UI</p>
</div><!-- col-lg-6 -->
<div class="col-lg-6 text-center lightUp comeOut3">
<div class="projectImage3">
<a href="project2.php"><img src="img/picture2.jpg" alt="" class="img-fluid mb-3"></a>
</div>
<p class="caption3">JRP: Brand Identity</p>
</div><!-- col-lg-6 -->
<div class="col-lg-6 text-center lightUp comeOut4">
<div class="projectImage4">
<a href="http://joeynamiki.com/resume/project3_1.php"><img src="img/image4.jpg" alt="" class="img-fluid mb-3"></a>
</div>
<p class="caption4">SoofStore!: Graphic Design</p>
</div><!-- col-lg-6 -->
style.css
body {
margin-top: 20px;
}
.navbar {
opacity: 0.9;
height: 80px;
}
.info-header {
width: 50%;
margin: auto;
border-bottom: 1px #ddd solid; }
#mypassion-section .fa, #strength-section .fa {
color: #fff;
background: #333;
padding: 4px;
border-radius: 5px;
font-size: 30px; }
#strength-section .fa {
background: #fff;
padding: 4px;
border-radius: 5px;
font-size: 30px; }
.card:hover {
opacity: 0.9;
}
.mainPic1 {
text-align: center;
list-style: none;
}
.btn_position{
display: block;
margin: 0 auto;
}
.nextProject {
text-align: right;
}
.question {}
.wireframe{
list-style: none;
float:left;
}
.wireText {
clear: both;
}
.wireframeBox {
/* background: #f4f4f4;
width: 650px;
height: 642px;
margin: 0 auto; */
}
.intro {
list-style: none;
}
#about .sns fa {
font-size: 15px;
text-align: center; }
#about .sns fa:hover {
opacity: 0.7; }
.nonDots {
list-style: none;
}
/* .lightUp:hover {
opacity: 0.8;
} */
.line {
float:left;
}
.next {
}
/* .comeOut:hover {
background: rgba(255,255,255,0);
} */
/* .projectImage1:hover {
opacity:0;
} */
.projectImage1 {
position:relative;
}
.projectImage2 {
position:relative;
}
.projectImage3 {
position:relative;
}
.projectImage4 {
position:relative;
}
.caption1 {
color:#000;
font-size: 36px;
text-align: center;
position: absolute;
top: 120px;
left:80px;
opacity:0;
}
.caption2 {
color:#000;
font-size: 36px;
text-align: center;
position: absolute;
top: 120px;
left:80px;
opacity:0;
}
.caption3 {
color:#000;
font-size: 36px;
text-align: center;
position: absolute;
top: 120px;
left:80px;
opacity:0;
}
.caption4 {
color:#000;
font-size: 36px;
text-align: center;
position: absolute;
top: 120px;
left:80px;
opacity:0;
}
.comeOut1 {
width:650px;
/* height:550px; */
}
.comeOut2 {
width:650px;
/* height:550px; */
}
.comeOut3 {
width:650px;
/* height:500px; */
}
.comeOut4 {
width: 650px;
/* height:500px; */
}
.sButton{
margin-top: 20px;
}
mobile.css
@media screen and (min-width: 0px) and (max-width: 320px) {
.navbar {
width: 430px;
height: 80px;
padding-bottom: 10px;
display: block;
position: absolute;
z-index: 999;
}
.navbar-toggler {
position: absolute;
top: 5px;
left: 265px;
}
#navbarNav {
background-color: white;
opacity: 1;
color: white;
}
#showcase {
padding-top: 30px;
z-index: 0;
}
}/*@media 1px*/
@media screen and (min-width:321px) and ( max-width:345px) {
.navbar {
width: 430px;
height: 80px;
display: block;
padding-bottom: 10px;
position: absolute;
z-index: 999;
}
.navbar-toggler {
position: absolute;
top: 5px;
left: 265px;
}
#navbarNav {
background-color: white;
opacity: 1;
color: white;
}
#showcase {
z-index: 0;
}
}/*@media 321px*/
@media screen and (min-width:346px) and ( max-width:480px) {
.navbar {
width: 430px;
height: 80px;
display: block;
padding-bottom: 10px;
position: absolute;
z-index: 999;
}
.navbar-toggler {
position: absolute;
top: 5px;
left: 378px;
}
#navbarNav {
background-color: white;
opacity: 1;
color: white;
}
#showcase {
z-index: 0;
}
【问题讨论】：
标签： html css twitter-bootstrap media-queries