html - 响应式布局、溢出、x 滚动显示

Question

大家。我在响应式布局方面遇到问题。在大屏幕上一切看起来都很好，当我调整浏览器大小时出现问题。我的导航没有全宽拉伸(stretch)，即使它的宽度是 100%。

导航的 html:

<header>
    <div class="navigation">
        <h3>lorem<span class="bold">ipsum</span></h3>
        <div class="logo">
            <h3>your<span class="red">logo</span></h3>
        </div>
        <div class="nav">
            <ul>
                <li class="active close"><a href="#">Home</a></li>
                <li class="subMenuToggle"><a href="#">About us</a></li>
                <li><a href="#">Our work</a></li>
                <li><a href="#">Our process</a></li>
                <li><a href="#">Our people</a></li>
                <li><a href="#">Social</a></li>
                <li><a href="#">Get in touch</a></li>
                <li><a href="#"><span>Hire</span></a></li>
                <li><a href="#"><span>Careers</span></a></li>
            </ul>
        </div>
    </div>
    <div class="subMenu">
        <div class="subNav">
            <ul>
                <li class="active2"><a href="#">WHAT WE DO</a></li>
                <li><a href="#">PEOPLE</a></li>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">CONTACT</a></li>
                <li><a href="#">VALUES</a></li>
            </ul>
        </div>
    </div>

还有，SCSS:

.navigation {
width: 100%;
height: 70px;
background: white;

.nav {
    float: right;
    margin-top: 10px;
    box-sizing: border-box;
    ul {
        margin: 32 0;


            li {
                display: inline-block;
                margin-right: 30px;
                text-transform: uppercase;
                font-size: 14px; 
                font-weight: bold;
                height: 38px;
                font-family: 'Open Sans', sans-serif;
                transition: all 200ms ease-in;

                span {
                    color: gray;

                }

                a {
                    color: inherit;
                    display: inline-block;
                    height: 40px;
                    text-decoration: none;
                }

                &:active {
                    border-bottom: 4px solid rgb(185, 151, 106);
                    color: rgb(185, 151, 106);
                }



            }
                .active {
                    border-bottom: 4px solid rgb(185, 151, 106);
                    color: rgb(185, 151, 106);
                }

    }  
}

此外，图像的作用恰恰相反，它们超出了视口(viewport)，因此您需要滚动才能看到全宽。由于所有图像都以相同的方式完成，他就是一个例子:HTML:

<div class="container">
        <div class="section1">
            <img src="Assets/img/Header/Header.PNG" alt="header1">
            <div class="contentBox1">
                <p class="kicker2">Sed ut Perspiciatis</p>
                <h2>Nemo Enim</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis feugiat risus nec scelerisque. Sed sagittis magna quis sodales convallis. In convallis nec lacus sed fermentum. Integer ultrices felis ac quam commodo, a viverra enim condimentum. Praesent gravida magna in aliquet luctus.</p>
                <button type="button" class="cta1">AT VERO EROS</button>
            </div>
            <div class="contentBox2">
                <h2>QUIS AUTEM VEL<br> EUM DOLOR</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis feugiat risus nec scelerisque. Sed sagittis magna quis sodales convallis.</p>
            </div>
            <div class="ImageBox1">
                <img src="Assets/img/Header/img1.PNG" alt="img1">
            </div>
        </div>
    </div>

和 CSS:

.container {
margin: 0 auto 395px;
width: 1210px;
@include clearfix;

.section1 {
    width: 1210px;
    position: relative;
    img {
        width: 100%;
        height: 480px;
        z-index: -1;
    }
    .contentBox1 {
        position: absolute;
        width: 450px;
        height: 543px;
        background: white;
        bottom: -270px;
        left: 65px;
        z-index: 1;


        p.kicker2 {
            margin: 80px 0 0 90px;
            text-transform: uppercase;
            color: $ThemeColor;
            font-size: 14px;
            font-family: 'Open Sans', sans-serif;
        }

        h2 {
            margin: 18px 0 32px 90px;
            text-transform: uppercase;
            font-size: 45px;  
            font-family: 'Droid Serif', serif;
        }
        p {
            margin: 0 50px 0 90px;
            font-size: 20px;
            font-family: 'Open Sans', sans-serif;
            color: grey;
        }

        .cta1 {
            background: white;
            color: black;
            font-size: 14px;
            font-weight: bold;
            justify-content: center;
            width: 235px;
            height: 60px;
            border: 2px solid black;
            margin: 37px 0 0 90px;
            font-family: 'Open Sans', sans-serif;
            &:hover {
                cursor: pointer;
                background: rgb(233, 233, 233);
            }
            &:active {
                position: relative;
                top: 1px;
            }
        }

    }
    .contentBox2 {
        position: absolute;
        width: 270px;
        height: 274px;
        background: rgb(40, 40, 40);
        bottom: -270px;
        left: 515px;
        z-index: 1;

        h2 {
            color: $ThemeColor;
            margin: 40px 0 18px 37px;
            font-size: 20px;
            font-family: 'Open Sans', sans-serif;
        }
        p {
            color: rgb(153, 153, 153);
            margin: 0 56px 0 37px;
            font-size: 17px;
            font-family: 'Open Sans', sans-serif;
        }
    }
    .ImageBox1 {

        img {
        position: absolute;
        width: 180px;
        height: 182px;
        bottom: -270px;
        left: 965px;
        z-index: 6;
        }
    }
}

这真的让我发疯。另外，为什么当我进行媒体查询时，例如，for (max-width: 700px)，它开始影响页面的速度要快得多，比如大约 1000px？好像不同步一样。这整个响应式布局让我头疼......对不起，很长的帖子...附言如果你想查看完整代码，这里有一个 gitHub reppo:https://github.com/Vukasin90/test

Answer 1

@media screen and (max-width: 770px) {
  body {
    min-width: 770px; }
    body .navigation {
      width: 100vh; /* <----- here*/
      height: 70px;
      background: white; 
}

我认为这可能是个问题。您的导航宽度在 viewheight 而不是 viewwidth 中具有值是故意的吗？