css - 为什么使用响应式 CSS 代码堆叠元素？

Question

我有一个在网格中构建的投资组合页面。在普通尺寸的显示器和大多数移动设备上，响应能力都很好。响应在某些移动设备(即 Nexus 6P)上中断，内容堆叠的尺寸越来越小，如俄罗斯套娃。

已编辑:经过大量故障排除和阅读其他问题后，我认为这与原始设计器设置 em 和 px 视口(viewport)大小的响应有关。这是正常的吗？我在下面添加了一个指向屏幕截图和 css 文件的链接，因为有很多不同的媒体查询会对此产生影响。

编辑:它只发生在一个非常小的窗口上，似乎是 40.063em 和 ~<640px 范围媒体查询重叠的地方。此外，事实证明它很难在模拟器中复制，因为如果我先打开一个较小的视口(viewport)，然后打开 Nexus6P 尺寸(或宽度为 641px 或更小的其他尺寸)，它会加载正常。它仅在从较大的视口(viewport)更改为宽度为 641 像素或更小的视口(viewport)时出错。

Nexus 6P size, items stack oddly

我还听从了另一篇类似帖子的建议，使用“white-space:nowrap;”并将其添加到 .work-item 代码和 .work-item img 中。它改变了堆叠(不同的元素堆叠)但没有解决问题。

已解决:此模块的 HTML 文件声明了中 6 和大 3 网格大小，但未声明较小，导致格式不正确。

<div class="medium-6 large-3 work-item">

我在类中添加了 small-6 并调整了媒体查询以使其更合适。

<div class="medium-6 large-3 small-6 work-item">

感谢您的帮助!我学到了更多关于媒体查询的知识，今天又重新学习了更多关于网格的知识。

Answer 1

使用 clear: both 属性在完成你的部分区域之后，在你的页脚区域之前。要调整设备像素比率，您必须使用媒体查询才能提供一个很好的跨平台解决方案。