Question

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

看一下图片，红色边框就是为了确保媒体查询确实正常工作，我已经剥离了很多代码以方便，但下面是我认为相对的。

标题图片

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

HTML code：

<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等设置不同的媒体查询。这样做的原因，因为有时百分比并没有解决所有问题..你可能会遇到一些布局错误，但是当你面对这个问题很简单时，

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

为什么宽度：100％不适用于我的响应式设计？

1 个答案: