0

我查看了一些 css 响应网格。我目前正在尝试无语义。我不太明白它如何管理各种分辨率，如 400、768、1024，而我们只能使用两种类：grid-XX 和 mobile-grid-XX。

非语义 CSS 文件包含有关我上面提到的所有分辨率的媒体查询，但我不明白如何使用它们。

例如，如果我的主页上有两列，我希望它们在 1024 像素或更大时各 50% 宽，在 640 和 1024 像素之间分别为 70% 和 30% 宽，在 400 像素及以下时宽 100%。

可能吗？

你知道任何更容易理解和使用的响应式网格系统吗？

4

2 回答 2

1

我不确定如何使用 Unsemantic 做到这一点。但是，我以前使用过Susy来执行此操作。

于 2013-06-17T13:49:35.323 回答
0

尝试级联框架。

Cascade Framework 的网格系统完全符合您的要求。开箱即用，Cascade Framework 的网格系统支持 60%/40%、25%/75%、33.33%/66.66%、20%/20%/20%/20%/20%、43.75%/31.25%/25 %、30%/30%/40% 和更多组合。事实上，您甚至可以使用 42.8571429%/{fill to 100%}、{fit content}/{fill to 100%} 或 {fit content}/30%/{fill to 100%} 等组合。

Cascade 框架中的网格元素是

  • 以下 HTML 元素之一：section、main、article、header、footer、aside 或 nav（这些元素用旧 IE 的 HTMLshiv 填充，以备不时之需）。

  • 具有“col”类的 div 元素（可以在没有 polyfill 的旧 IE 中使用）。

要为网格元素添加宽度，请添加格式为“width-XofY”的类，其中 Y 可以是 2、3、4、5、6、7、8、9、10、12、16 或 24，并且X 可以是任何低于 X 的值。

更具体地说，这里有一些可以在 Cascade Framework 中使用的有效类的示例：'width-1of2'（宽度：50%）、'width-3of4'（宽度：25%）、'width-2of5'（宽度：40 %)、'width-2of5'（宽度：40%）、'width-2of7'（宽度：28.5714286%）和'width-13of16'（宽度：81.25%）

除了这些类之外，您还可以使用分别适合内容并填充 100% 宽度的任何剩余部分的“width-fit”和“width-fill”类。或者，您可以定义自己的类和 ID，并为这些类添加自定义宽度，以“语义”方式执行操作。

如果您的构建包含响应模块，则所有网格元素的宽度在移动设备上自动重置为 100%。您可以使用“mobile-width-3of16”、“phone-width-3of7”或“tablet-width-2of4”等类来自定义不同宽度范围的布局以及“desktop-hidden”、“mobile-hidden”类, 'phone-hidden' 或 'tablet-hidden' 隐藏特定屏幕的内容和范围。

请注意，当前版本的 Cascade Framework 是用纯 CSS 编写的。这意味着（还）无法通过仅更改单个变量来配置区分桌面、平板电脑和手机的断点。但是，如果您对默认断点不满意，您可以在源代码中使用您自己的自定义断点来复制替换这些断点。

另请参阅http://jslegers.github.io/cascadeframework/grid.html和http://jslegers.github.io/responsiveness/。

于 2014-01-07T20:32:05.050 回答