为什么使用响应式css代码堆叠项目？

我有一个在网格中构建的投资组合页面。在普通尺寸的显示器和大多数移动设备上，响应性效果良好。在某些移动设备（即Nexus 6P）上响应速度有所下降，内容堆叠的尺寸会减小，如俄罗斯娃娃。为什么使用响应式css代码堆叠项目？

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

编辑：只有这似乎是在40.063em和〜< 640像素，范围媒体查询重叠的非常小的尺寸窗口发生。另外，在模拟器中复制也很困难，因为如果我先打开一个较小的视口，然后再打开Nexus6P尺寸（或其他尺寸为641px或更小的其他尺寸），则它会正常加载。它仅在从较大的视口更改为宽度为641px或更小的视口时出错。

Nexus 6P size, items stack oddly

我也跟着另一个类似的职位的建议，使用“白色空间：NOWRAP;”并在.work-item代码和.work-item img中添加了该代码。它改变了堆叠（不同的物品堆叠），但没有解决问题。

已解决：此模块的HTML文件声明为中等6和大3的网格大小，但留下少量未声明的格式，导致格式尴尬。

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

我加小6类，并调整了媒体的质疑，使事情很好地适应。

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

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

来源

2017-08-02 Sonya Iverson

链接到小提琴/笔/垃圾桶，尽可能地重现问题。这样我们可以帮助你更好。 – SidTheBeard

你能否请你添加相关的HTML来重现你的问题？ –

@SidTheBeard，我试着用小提琴复制，无法得到响应错误。我现在最好的领导是原始设计师设置em和px单位的响应能力，他们似乎重叠并导致错误，但我无法追查到具体的罪魁祸首。它也只发生在模拟器上，当我从一个更大的屏幕尺寸到这个特定的尺寸。如果我先加载有问题的尺寸，或者加载正确的加载一个然后问题一，它加载罚款。 –

-1

使用明确：均为属性完成您的区域，在您的页脚区域之前。为了调整设备像素比例，您必须针对不同设备使用媒体查询。

来源

2017-08-02 07:36:03

为什么使用响应式css代码堆叠项目？

回答

相关问题