0

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

这是我目前所拥有的：http: //pftest.comyr.com/grid/

我遇到的问题之一是弄清楚如何使用 CSS 媒体查询让网格列（特别是包含六边形的 3 个 div 列）在不同的屏幕大小“断点”处折叠，这样它们就不会简单地重叠彼此在较小的屏幕尺寸。

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

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

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

有问题的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”类。

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

4

1 回答 1

1

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

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

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

要修复您的网格，您应该在某些类中使用max-widthandmax-height而不是 widthandheight并更改一些 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 我们制作单列出现在网格崩溃之前，从而使网格运行良好。

于 2013-11-12T11:31:21.093 回答