我应该使网页响应到哪个设备宽度大小？

Question

我让我的网页响应式，但当宽度小于 350px 时出现水平条，我发现导航栏越界了。我应该解决这个问题吗？如果是怎么办？

Answer 1

响应式代码的最小宽度应为 320px。

当您获得水平滚动时，这意味着您有：

• 不换行的内容
• 具有 min-width 的元素或 min-width 大于视口
的元素
• 大 margins/paddings 压缩您的内容
• 虽然 body 的宽度与视口相同，但其中的某些内容的宽度比视口大
• 绝对定位的元素或定位在视口之外的元素。

有些人通常使用 body { overflow-x: hidden; } 来减轻或防止任何水平滚动。但我建议不要这样做，因为我更喜欢处理 css/html 问题而不是隐藏它们。

Answer 2

现在通常最小的响应宽度是 320 像素（即第一个 iPhone SE 的宽度）。

您可以在移动模拟模式下使用Chrome开发者工具，有预定义的宽度和相应的具有此宽度的流行设备。

Answer 3

尝试删除滚动条，但如果响应性在 320px 以内都很好，那你就没问题了。