我查看了一些 css 响应网格。我目前正在尝试 Unsemantic。 我不太明白它如何管理各种分辨率，如 400、768、1024，而我们只能使用两种类：grid-XX 和 mobile-grid-XX。
非语义 CSS 文件包含有关我上面提到的所有分辨率的媒体查询，但我不明白如何使用它们。
例如，如果我的主页上有两列 我希望它们在 1024 像素或以上时各宽 50%，在 640 和 1024 像素之间宽 70% 和 30%，在 400 像素及以下时宽 100%。
有可能吗？
您知道任何更易于理解和使用的响应式网格系统吗？
【问题讨论】：
标签： css grid media-queries
我不确定如何使用 Unsemantic 执行此操作。但是，我以前使用过Susy 来做这件事。
【讨论】：
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 框架中使用的有效类的示例：'width-1of2'（宽度：50%）、'width-3of4'（宽度：25%）、'width-2of5'（ width : 40%), 'width-2of5' (width: 40%), 'width-2of7' (width:28.5714286%) 和 'width-13of16' (width:81.25%)
除了这些类之外，您还可以使用“width-fit”和“width-fill”类，它们分别适合内容并填充 100% 宽度的剩余部分。或者，您可以定义自己的类和 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/。
【讨论】：