用户界面在 1000Px 及以下宽度时发生变化，为什么?(响应式设计)

Question

我目前正在为移动设备优化我的网站，但遇到了一个问题。如果我在移动设备或小型浏览器窗口上查看网站，网站上的某些对象将不再具有 100% 的有效宽度，但其他对象会。因此，您可以滚动到侧面，一半的内容有点粘在左侧。只要视口的宽度在1000Px以上，绝对没有问题。我使用百分比来测量元素，所以这应该不是问题。

>1000Px 屏幕宽度 <1001像素屏幕宽度

效果不是很明显，因为不会有水平滚动条，但您可以单击并按住网站的右侧并将其拉过来。真正的问题是，标头被推到一边，因为它是对象之一，它仍然使用"完整"100% 宽度。

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

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

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

<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

这可能是由于标头元素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>