个人中心
gpt4 book ai didi

html - 低于 600px 的响应式设计会导致导航栏出现问题吗？

转载 作者：行者123 更新时间：2023-11-28 00:07:01 27 4
gpt4 key购买 nike

我目前正在为我当前的元素创建媒体查询，我目前面临的问题是某些东西导致我的导航栏在宽度低于 600 像素时无法响应。所发生的情况如附图所示。

What happens

这个问题其实我在之前的元素中曾经解决过一次，但是我对比了代码之后还是不记得我是如何解决这个问题的。

What I want to happen

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/

27 4 0
文章推荐： javascript - 如何根据属性合并数组中的对象
文章推荐： php - 在 PHP/HTML 源代码中回显 JavaScript 结果？
文章推荐： html - 使单元格边框与 Excel 的填充句柄完全一样？
文章推荐： javascript - 我如何通过将元素键入输入文本字段来验证元素是否存在？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com