Question

大家。响应式布局我遇到了问题。在大屏幕上一切都很好看，当我调整浏览器大小时出现问题。我的导航不会以全宽拉伸，即使其宽度为100％。

html for nav：

<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);
                }

    }  
}

此外，图像正好相反，它们超越了查看端口，因此您需要滚动才能看到全宽。由于所有图像都以相同的方式完成，他就是一个例子： 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;
        }
    }
}

这真让我疯狂。另外，为什么当我进行媒体查询时，例如（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; <----
      height: 70px;
      background: white; 
}

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

响应式布局，溢出，x滚动显示

1 个答案: