我目前正在为我当前的元素创建媒体查询，我目前面临的问题是某些东西导致我的导航栏在宽度低于 600 像素时无法响应。所发生的情况如附图所示。
这个问题其实我在之前的元素中曾经解决过一次，但是我对比了代码之后还是不记得我是如何解决这个问题的。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header>
<nav class="nav-bar">
<span class="open-slide">
<i class="fas fa-bars fa-2x"></i>
</span>
<ul class="nav-items">
<li><a href="#about">About</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#order">Order</a></li>
<li><a href="#locations">Locations</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<div class="about-text">
<h1>Comics.Cards.Fun</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, neque ipsa nisi voluptatum distinctio asperiores dolorem obcaecati reiciendis sunt eaque veritatis omnis, rerum qui aperiam totam magnam sit facilis quod.</p>
</div>
</section>
<section id="events">
<h1>Events</h1>
<div class="cards-container">
<% Event.all.each do |event|%>
<div class="event-card">
<div class="overlay"></div>
<div class="event-date">
<span class="date"><%= event.date %></span>
</div>
<div class="event-image">
<%= image_tag event.image_url.to_s %>
</div>
<div class="event-data">
<div class="event-title">
<h3><%= event.title %></h3>
</div>
<p class="event-details"><%= event.description %></p>
</div>
</div>
<% end %>
</div>
</section>
<section id="order">
<h1>Order</h1>
<p>Looking for your monthly fix of comics? Just order from us!</p>
<div class="order-steps">
<div class="fill-form">
<i class="far fa-list-alt fa-10x"></i>
<p>
List down all the comics you wish to order.
</p>
</div>
<div class="email-us">
<i class="far fa-envelope fa-10x"></i>
<p>
Email it to us at the
<br>
lastcomicshop@gmail.com
<br>
Deadline is the 20<sup>th</sup> of every month
</p>
</div>
<div class="delivery">
<i class="fas fa-truck fa-10x"></i>
<p>
If you wish to have your comics delivered, just give us your address!
</p>
</div>
</div>
</section>
<section id="locations">
<h1>Locations</h1>
<div class="location-div">
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3983.8821426536624!2d101.61402541462657!3d3.1258517541674418!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cc49cb25b5c01b%3A0xfcdf88c63a471fd6!2sThe+Last+Comic+Shop!5e0!3m2!1sen!2smy!4v1554862822510!5m2!1sen!2smy" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="address">
<p>
75A, Jalan SS22/23,
<br>
Damansara Utama,
<br>
47400 Petaling Jaya, Selangor
</p>
</div>
</div>
</section>
</main>
<footer>
<div id="contact-us">
<p>Connect with us:</p>
<div class="contact-outlets">
<i class="fab fa-facebook-square fa-3x"></i>
<i class="far fa-envelope fa-3x"></i>
</div>
</div>
</footer>
</body>
</html>
SCSS
// Place all the styles related to the Home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
* {
margin: 0;
padding: 0;
}
body {
box-sizing: border-box;
}
// Navbar
.nav-bar {
width: 100%;
height: 8%;
display: flex;
position: fixed;
z-index: 1;
overflow: hidden;
justify-content: center;
align-items: center;
background-color: rgba(33, 33, 33, 0.9);
color: white;
}
.nav-bar > ul {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.nav-bar > ul > li {
list-style: none;
color: white;
padding: 0 2rem;
}
.nav-bar > ul > li > a {
text-decoration: none;
color: inherit;
font-family: 'Bree Serif', serif;
font-size: 21px;
}
// Sections
section {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
position: relative;
text-align: center;
color: white;
h1 {
font-family: 'Bree Serif', serif;
font-size: 53px;
}
p {
font-family: 'Open Sans', sans-serif;
font-size: 26px;
}
}
#about {
background-color: rgba(243, 63, 63, 0.8);
.about-text {
position: absolute;
top: 45%;
}
}
#events {
background-color: rgba(63, 63, 243, 0.8);
.cards-container {
position: absolute;
top: 25%;
width: 100%;
height: 100%;
display: flex;
}
}
#order {
background-color: rgb(25, 134, 25);
.order-steps {
position: absolute;
top: 35%;
display: flex;
flex-direction: row;
justify-content: space-around;
.fill-form,
.email-us,
.delivery {
width: 20%;
i {
padding-bottom: 1rem;
}
}
}
}
#locations {
background-color: rgb(245, 233, 63);
.location-div {
width: 100%;
position: absolute;
top: 25%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
}
#contact-us {
width: 100%;
background-color: rgba(0, 0, 0, 0.85);
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0.5rem 0;
p {
font-size: 1.2rem;
}
.contact-outlets {
width: 125px;
display: flex;
justify-content: space-between;
}
}
// Event cards
.event-card {
width: 30%;
height: 58%;
position: relative;
// background: url(https://idigitalcitizen.files.wordpress.com/2009/08/6x4-autobobots-logo.jpg) 50% / cover no-repeat;
margin: 0 1.3rem;
overflow: hidden;
border-radius: 8px;
box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.3);
.overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: black;
visibility: hidden;
}
.event-date {
position: absolute;
top: 0;
left: 0;
padding: 0.8rem;
background-color: #77d7b9;
display: flex;
flex-direction: column;
.date {
font-size: 24px;
text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.18);
}
.month {
text-transform: uppercase;
}
.month,
.year {
font-size: 12px;
}
.event-image {
width: inherit;
height: inherit;
}
}
.event-data {
width: 100%;
height: inherit;
position: absolute;
bottom: 0;
z-index: 2;
padding: 0.8rem 0.5rem;
background-color: white;
color: black;
// Takes the height of the h3 tag with the class event-title and adds 3.5rem to hide the event details.
transform: translateY(calc(145px + 0.5rem));
transition: transform 0.5s;
.event-title {
font-family: 'Bree Serif', serif;
width: 100%;
height: 60px;
margin-bottom: 2rem;
}
.event-details {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
bottom: 0;
}
}
// When user hovers their mouse over the card, the event details pop up.
&:hover {
.overlay {
visibility: visible;
opacity: 0.5;
transition: opacity 0.5s, visibility 0.5s, ease;
}
.event-data {
transform: translateY(0);
transition: transform 0.5s;
}
}
}
// Responsive design
// Extra Small & Small devices
@media screen and (max-width: 600px) {
// navbar
.nav-bar {
ul {
display: none;
}
}
}
最佳答案
问题是您将导航栏设置为 100% 宽度(这很好)，但是由于您的 iframe 的宽度是 600px 它允许您的导航栏一直延伸以达到这个“100% “宽度。将您的 iframe 宽度更改为页面的宽度，这样您的导航栏和页面就不会越界。像这样:
<iframe src="..." width="100%" height="450" frameborder="0" style="border:0" allowfullscreen=""></iframe>
完成后，我建议减小导航项的字体大小，让它们都适合您的导航栏。
关于html - 低于 600px 的响应式设计会导致导航栏出现问题吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55651658/