为什么宽度:100%不适合我的响应式设计？

Question

我正在创建我的投资组合,我偶然发现了一个错误,我无法为响应式设计解决这个错误.使用chrome开发工具,我看到当屏幕宽度小于或等于1200px时我的宽度:1000%被击中;

看看图像,红色边框就在那里,以确保媒体查询确实有效,我已经剥离了很多代码以方便,但下面是我认为相对的.

标题图片

我们可以看到宽度被击出,我仍然有垂直滚动.

HTML代码:

<header>
    <nav>
        <div class="row">
            <img class="logo" src="../img/logo.svg" alt="asheem logo">
            <ul class="main-nav">
                <li><a href="#">Current Projects</a></li>
                <li><a href="#">Previous Projects</a></li>
                <li><a href="#">Contact me!</a></li>
            </ul>
        </div>
    </nav>
    <div class="hero-text-box">
        <h1>Asheem Chhetri</h1>
        <a class="btn btn-full" href="#">Projects</a>
        <a class="btn btn-ghost" href="#">Show me more</a>
    </div>
</header>

CSS代码:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    background-color: #fff;
    color: #6d6d6d;
    font-family: 'Exo', sans-serif;
    font-size: 20px;
    font-weight: 300;
    text-rendering: optimizeLegibility;
}
.clearfix{
    zoom: 1;
}
.clearfix:after{
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
/*------------------------------------------------
Reusable components
------------------------------------------------*/
.row{
    max-width: 1140px;
    margin: 0 auto;
}
.box{
    padding: 1%;

}
section{
    padding: 80px 0;
/*    height: 100vh;This solved the page flow problem for now. */
}
/*------------------------------------------------
Header
------------------------------------------------*/
header{
    background-image:  url(../img/imageForMain2.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    background-attachment: fixed;
    height: 100vh;
}
h1, h2, h3, h4{
/*    text-align: center;*/
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;

}
h1{
    margin-top: 0;
    margin-bottom: 20px;
    color: white;
    font-size: 200%;
    word-spacing: 4px;
}
.hero-text-box{
    position: absolute;
    width: 1140px;
    top: 20%;
    left: 50%;
    -webkit-transform: translate(-50%, -20%);
    transform: translate(-50%, -20%);
}

媒体查询代码:

/*------------------------------------------
Big tablets to 1200px(width smaller than 1140px)
-------------------------------------------*/
@media only screen and (max-width: 1200px){
    .hero-text-box{
        width: auto;
        padding: 0 2%;
        border: 1px solid red;
    }
    .row{
        padding: 0 2%;
    }
}

PS:我的头标已经有了:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

所以我显然不明白,为什么我得到垂直滚动？当屏幕尺寸大约为1200px时溢出？感谢您的帮助!

Answer 1

您的宽度不响应的主要原因是因为您使用的是 px(像素)，当您确定确定的尺寸/宽度时，像素非常有用，使用宽度的百分比而不是像素，它将解决您的问题。

至于您的媒体查询，也使用百分比。为平板电脑设置 min-width()，为 iphone、nexus 等设置不同的媒体查询。这样做的原因是，因为有时百分比并不能解决所有问题..您可能会遇到一些布局错误，但是当您遇到这个问题时解决这个问题很简单，

当屏幕尺寸较小时，使用像素。不是百分比。但这取决于你如何使用它。
总的来说，解决你的主要问题。使用百分比。我希望它有帮助:)
干杯