我在创建我的作品集时偶然发现了一个错误，我无法为响应式设计解决这个错误。 使用 chrome 开发者工具，我看到当屏幕宽度小于或等于 1200px 时，我的 width: 1000% 被删除了；

看图片，红色边框就在那里以确保媒体查询确实有效，为了方便起见，我删除了很多代码，但下面是我认为相对的。

标题图片

我们可以看到 width 被删除了，我仍然有垂直滚动。

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:我的 head 标签里已经有这个了:

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

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

最佳答案

你的宽度没有响应的主要原因是因为你使用的是 px(像素)，当你确定尺寸/宽度时，像素会非常有用， 使用 percentage 作为你的宽度而不是 pixel ，它会解决你的问题。

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

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

关于html - 为什么宽度是: 100% not working for my responsive design?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40755116/