为什么条目与响应性css代码堆叠？

Question

我在一个网格中建立了一个投资组合页面。在正常大小的监视器和大多数移动设备上，响应性很好。在某些移动设备(Nexus6P，即)上，响应能力会中断，内容堆叠的大小会越来越小，比如俄罗斯娃娃。

编辑:经过大量的疑难解答和阅读其他问题，我认为这是与最初的设计师设置响应与em和px视口大小有关。这是正常的吗？我在下面添加了一个链接到屏幕截图和css文件，因为有很多不同的媒体查询会影响到这一点。

编辑:它只发生在一个非常小的窗口，似乎是40.063em和~<640px范围媒体查询重叠的地方。而且，在模拟器中进行复制也很困难，因为如果我先打开一个较小的视口，然后打开Nexus6P大小(或者宽度为641 of或更小的其他大小)，它就会加载得很好。只有当从较大的视口变为宽度为641 to或更小的视口时，才会出现错误。

Nexus6P大小，项目堆栈奇怪

我还遵循了另一篇类似文章的建议，即使用“空格: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属性。为了调整设备像素比，您必须使用媒体查询来提供一个很好的跨平台解决方案。