Question

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

这就是我现在所拥有的：http://pftest.comyr.com/grid/

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

经过大量的试验和错误后，我终于发现我可以通过应用宽度为50％的类/ ID并将其放到媒体中来折叠为平板电脑屏幕尺寸设备的两列查询： @media only screen和（max-width：908px）{} 和（希望）它现在整齐地折叠成大小相当的两列（至少它来自我的简短测试）< / p>

我现在遇到的问题是弄清楚如何让它变成一个专栏，用于较小的智能手机屏幕尺寸（@media（最大宽度：22em），@ media（最大宽度： 320px）等。

我使用与两列断点相同的#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，此类是宽度为50％的#workgrid子元素。在一个小的浏览器视口中，例如宽度为320像素，您的#workgrid像素宽度将为160px，而.shape宽度将相同，300px，这会导致内容超出空间和其他元素空间崩溃。

以下两个链接可能有助于您更好地理解流体元素：

要修复网格，您应该在某些类中使用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时（656px = 41em，当前font-size为16px），网格开始崩溃，当浏览器的视口宽度为22em或更小时，此网格变为单列网格，因此将22em更改为41em我们会在网格折叠之前出现单列，从而使网格运行良好。

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

1 个答案: