用户界面在 1000Px 宽度及以下发生变化，为什么？ （响应式设计）

Question

我目前正在针对移动设备优化我的网站，但是 运行 遇到了问题。如果我在移动设备或小型浏览器 window 上查看网站，网站上的一些 objects 将不再具有 100% 的有效宽度，但其他人会。所以你可以滚动到一边，一半的内容有点粘在左边。只要视口的宽度在1000Px以上就绝对没有问题。我用百分比来衡量元素，所以这应该不是问题。

>1000Px screenwidth <1001Px screenwidth

效果不是很明显，因为不会有水平滚动条，但是你可以点击并按住网站右侧，然后拉过来。真正的问题是，header 被推到了一边，因为它是 objects 之一，它仍然使用 "full" 100% 宽度。

我有一个媒体查询，它将 header 更改为 1000Px

@media screen and (min-width: 1000Px) {.mobilenav {display: none;}

如果我禁用这个，问题就消失了，但是如果我删除唯一的 div 使用这个 class

<div class="mobilenav">
   <span style="font-size:25px; cursor:pointer;" onclick="openNav()">&#9776;</span>
</div>

问题仍然存在……div 没有在屏幕上延伸，我检查了一下，现在我真的没有解决方案了。

这里是 .mobilenav 的 css 如果有帮助的话

.mobilenav {
    position: relative;
}
.mobilenav span {
    position: absolute;
    bottom: 10%;
}

Answer 1

这可能是因为您的 header 元素的 padding。您可以查看下面的示例，它将显示为 width + padding

.container {
width: 300px;
height: 100px;
background: #ccc;
}
.article {
 width: 100%;
 height: 20px;
 margin-top: 8px;
 background: #999;
}

<div class="container">
 <div class="article">article 1</div>
 <div class="article" style="padding: 4px">article 2</div>
</div>