我看了一些css rsponsive网格。我现在正在尝试Unsemantic。 我不太了解如何管理400,768,1024等各种分辨率，而我们只能使用两种类：grid-XX和mobile-grid-XX。
非语义CSS文件包含有关我上面提到的所有分辨率的媒体查询，但我不了解如何使用它们。
例如，如果我的主页上有两列 我希望它们在1024px或更高时分别为50％宽，在640和1024px之间为70％和30％宽，在400px及更低时为100％宽。
有可能吗？
您是否知道任何易于理解和使用的响应式网格系统？
答案 0 :(得分：1)
我不确定如何使用Unsemantic执行此操作。但是，我之前使用Susy来做这件事。
答案 1 :(得分：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％）
除了这些类之外，您还可以使用分别适合内容的类'width-fit'和'width-fill'，并填充100％宽度的剩余部分。或者，您可以只定义自己的类和ID，并为这些类添加自定义宽度，以“语义”方式执行操作。
如果您的构建包含响应模块，则所有网格元素的宽度在移动设备上自动重置为100％。您可以使用“mobile-width-3of16”，“phone-width-3of7”或“tablet-width-2of4”等类来自定义不同宽度范围的布局以及“桌面隐藏”类，“移动隐藏”类，'phone-hidden'或'tablet-hidden'隐藏具有范围的特定屏幕的内容。
请注意，当前版本的Cascade Framework是用纯CSS编写的。这意味着（仅）通过更改单个变量来配置区分桌面，平板电脑和手机的断点是没有办法的。但是，如果您对默认断点不满意，可以在源代码中使用自己的自定义断点对这些断点进行复制替换。
另请参阅 http://www.cascade-framework.com/grid.html 和 http://jslegers.github.io/responsiveness /。