我看着一些CSS响应网格。我目前正在尝试Unsemantic。我不太了解它如何管理400、768、1024等各种分辨率，而我们只能使用两种类：grid-XX和mobile-grid-XX。
非语义CSS文件包含有关我上面提到的所有分辨率的媒体查询，但我不知道如何使用它们。
例如，如果我的主页上有两列我希望它们在1024px或以上时分别宽50％，在640和1024px之间分别宽70％和30％，在400px或以下时宽100％。
有可能吗？
您知道任何响应式网格系统可能更易于理解和使用吗？
我不确定如何使用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％/ {填充到100％}，{fit内容} / {填充到100％}或{fit content} / 30％/ {填充到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”类，“隐藏电话”或“隐藏平板电脑”以隐藏具有范围的特定屏幕的内容。
请注意，当前的Cascade Framework版本是用纯CSS编写的。这意味着（仅）尚无法通过仅更改单个变量来配置用于区分台式机，平板电脑和手机的断点。但是，如果您对默认断点不满意，则可以在源代码中使用您自己的自定义断点来复制这些断点。
另请参阅http://jslegers.github.io/cascadeframework/grid.html和http://jslegers.github.io/responsiveness /。