使用媒体查询和断点操作网格列布局

Question

我正在尝试通过重新设计我的在线作品集，使用 SimpleGrid 框架（这个：thisisdallas.github.io/Simple-Grid/‎）结合 HTML5 样板的元素来熟悉响应式、适合移动设备的布局帮助我开始。

这是我目前得到的：http://pftest.comyr.com/grid/

我遇到的一个问题是弄清楚如何使用 CSS 媒体查询让网格列（特别是包含六边形的 3 个 div 列）在不同的屏幕大小“断点”处折叠，以便它们不会t 只是在较小的屏幕尺寸上相互重叠。

经过大量的反复试验后，我最终发现我可以通过将带有width: 50% 和float: left 的类/ID 应用于媒体查询，将其折叠为平板电脑屏幕大小的设备的两列of: @media only screen and (max-width: 908px) { } 并且（希望）现在它以大致相同的大小整齐地折叠成两列（至少从我的简短测试来看） p>

我现在遇到的问题是弄清楚如何让它折叠成单个列以用于较小的智能手机屏幕尺寸（@media（最大宽度：22em），@media（最大宽度： 320 像素）等。

我已经尝试了各种不同的属性，使用我用于两列断点的相同 #workgrid ID - 但无论出于何种原因似乎都无法让它工作，不幸的是网格中几乎没有文档可能对我有帮助的框架。

有问题的 CSS 是：

@media (max-width: 22em) {
#workgrid {

    width: 100%;
    float: left;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
}
}

适用于每个 DIV "col-1-3" 类。

正如您现在看到的那样，它折叠成两列，然后在任何小于此的屏幕尺寸处开始重叠。我敢肯定这是我错过/没有看到的相对简单的东西，只需要朝着正确的方向努力...... :)

Answer 1

主要问题是您在网格的响应元素内使用无响应单元，并且您没有将 max-height 和 max-width 用于图像等元素。

例如，您有一个名为.shape 的元素类，其宽度为300px，该类是#workgrid 的子类，其宽度为50%。例如，在具有 320 像素宽度的小型浏览器视口中，您的 #workgrid 像素宽度将是 160 像素，而 .shape 宽度将相同，为 300 像素，这会导致内容超出空间并折叠其他元素空间。

这里有两个链接可以帮助您更好地理解流体元素：

• Fluid images

• max-width

要修复您的网格，您应该在某些类中使用max-width 和max-height 而不是width 和height，并更改一些css 属性，例如background-size。解决它的另一种方法是使用响应式单位而不是尺寸固定的单位。响应式网络需要响应式措施。

修复需要时间并且可能会令人恼火，因此如果您想要替代解决方案，您可以通过更改 main.css 和 simplegrid.css 来解决您的问题：

@media (max-width: 22em) {

到这里：

@media (max-width: 41em) { // If it doesn't work, test a larger number like 44em or something like that

当浏览器视口小于 656px 时，您的网格开始折叠（对于当前的 font-size 为 16px，656px = 41em），当浏览器的视口宽度为 22em 或更小时，此网格将变为单列网格，因此更改为 22em到 41em 我们使单列出现在网格折叠之前，从而使网格正常工作。