Question

我创建了这个网站（当然还没有完成）但是我已经遇到了做出响应的问题：（

背景图片正在使用h1和h3调整大小，但它看起来不太好，而且它也在菜单下。

有没有人就如何使其响应有任何建议？并在较小的屏幕上让它看起来更好？

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-size: 16px;
}

.header-main {
    background-image: url("https://i.stack.imgur.com/EJvoD.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 90vh;
    width: auto;
    font-family: 'Monoton', cursive;
}

.header-main h1 {
    font-size: 6vw;
    color: rgb(253, 59, 101);
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    margin-left: 1rem;
}

.header-main__subtitle {
    color: rgb(253, 59, 101);
    margin-right: 1rem;
}

.header-main__subtitle h3 {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
}

.header-main__subtitle h3 div {
    padding: 0.2rem;
}

.header-menu__items {
    display: flex;
    list-style: none;
    flex-flow: row wrap;
    justify-content: space-between;
    height: 10vh;
}

.header-menu__item {
    padding: 2rem;
}

.header-menu__item a {
    text-decoration: none;
    color: rgb(253, 59, 101);
    font-weight: bold;
    font-family: "Courier New", Courier, monospace;
}

.header-menu__item a:hover {
    border-bottom: 2px solid rgb(253, 59, 101);    
}

@media screen and (orientation:portrait) {
        .header-main {
            height: auto;
        }
}

<!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>
    <link href="https://fonts.googleapis.com/css?family=Monoton" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="header-menu">
            <nav>
                <ul class="header-menu__items">
                    <li class="header-menu__item"><a href="#">HOME</a></li>
                    <li class="header-menu__item"><a href="#">ABOUT</a></li>
                    <li class="header-menu__item"><a href="#">SERVICES</a></li>
                    <li class="header-menu__item"><a href="#">INSTA</a></li>
                    <li class="header-menu__item"><a href="#">CONTACT</a></li>
                    <li class="header-menu__item"><a href="#">BOOK ONLINE</a></li>
                </ul>
            </nav>
        </div>
        <div class="header-main">
            <div><h1><div>GODDESS</div><div>BRAIDS</div><div>SALON</div></h1></div>
            <div class="header-main__subtitle"><h3><div>...WHERE</div><div>HAIR</div><div>DREAMS</div><div>COME</div><div>TRUE</div></h3></div>
        </div> 
    <nav>
            <ul>
                <li><a href="">fb</a></li>
                <li><a href="">inst</a></li>
                <li><a href="">twitter</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div>
            <h1>about</h1>
            <h2>GODDESS BRAIDS</h2>
            <p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. I’m a great place for you to tell a story and let your users know a little more about you.</p>
        </div>
        <div></div>
        <div></div>
    </main>
    <footer>

    </footer>
</body>
</html>

背景图片：

Answer 1

使网站响应的最常见方法如下：

Bootstrap，这是一个用于为不同屏幕尺寸创建一般布局的框架。
Media queries，它是CSS3的一部分，用于在非常特定的屏幕尺寸上应用样式。
Hamburger-buttons为您节省了大量空间。
CSS Grid，这是一个基于网格的布局系统，与媒体查询相结合，可以获得与Bootstrap相同的结果，甚至更多！（虽然Bootstrap更容易使用）

背景图片/ h1 / h3无响应

1 个答案: