Question

当页面宽度<＆lt;时，页面上的

（http://whitewashed.richiesiegel.com） 400px在右边有一些额外的空间，我想摆脱。

这是媒体查询

@media handheld, screen and (max-width: 400px) {

    #nav {
        height: 30px;
        background-color: white;
        font-size: 1.3em;
        padding-top: 9px;
        padding-bottom: 10px;
        text-transform: uppercase;
        overflow: hidden;

    }

    #nav span {
        color: #272732;
        letter-spacing: .192em;
        font-family: "brandon-grotesque",Helvetica,sans-serif;
        font-weight: 100;
        text-transform: uppercase ;
    }
    }

任何想法？溢出或保证金问题？

Answer 1

从我所看到的，你的导航与此无关。我找到了导致这种情况的一个元素：#footnote在视口为400px时的计算宽度为475px。您可以通过在该元素上使用box-sizing: border-box;轻松修复此问题（另外还使用-moz-和-webkit-前缀）。修复此div修复了大部分空白问题。

剩余的额外空间似乎是由.text和.intro div引起的。在400px视口，.text总共410px宽，.intro是420px，这似乎是一些边距和/或填充。您可以通过使用box-sizing或缩小宽度来执行与上面类似的操作。

如果你选择box-sizing路由，我强烈推荐它用于响应式设计，因为它在计算宽度时考虑了填充和边框，你需要增加填充以使文本有一些呼吸空间。< / p>

我如何摆脱这个溢出问题？

1 个答案: