基于关键变量的CSS调整

问题描述：

我已经构建了一个动态调整大小的网格布局，可以在任何大小的分辨率（手机，平板电脑，桌面）中合理地适应并处理大小调整，同时接近像素完美（对不起， m OCD - 我说“接近”，因为我的数学现在被打破了，你不能在一个奇数大小的容器内放置两个均匀大小的元素，而一边没有填充1px）。基于关键变量的CSS调整

无论如何，下面是我用JavaScript入侵的链接。这是我试图拉开的一个例子。稍微调整底部窗格的宽度以查看我要做什么。

它这是自被移植到角有些难看手动的JavaScript，但还是丑陋的JavaScript计算所有的样式保持。

所以我的问题 ...我可以把它关闭严格的CSS？或者更多的CSS和更少的JavaScript？我的意思是根据屏幕宽度动态调整大小的单元格？

这里是业务规则：

最大单元格宽度：320个像素
每行最小＃电池：2
- 这可能是不可能的CSS，所以我会在我的Galaxy Nexus（其portait模式为360px宽）的最小单元格宽度：178上进行处理时的精细度：
单元格边框：与2px的轮廓细胞之间
可见保证金5PX：3px的（保证金实际上是5像素，但outline渗出）

在这个例子中，我在重绘每次调整大小的细胞，但在我的Angular版本中，我相信只是样式会更新。也就是说，我可能会在重新调整大小时重新绘制table，但我只需根据文档宽度计算单元格宽度，以及...我不会为使用table而感到兴奋。 = [

末端疯狂咆哮

答

媒体查询

CSS media queries可能让你很接近一个只CSS的解决方案。

这里的关键概念是根据浏览器的宽度使用不同的布局网格来改变列的数量。

媒体查询是根据浏览器宽度更改布局的自然CSS方式。而且他们不需要JavaScript。如果您使用一组媒体查询（每个查询的目标是不同的浏览器宽度范围）来控制使用哪个布局网格，那么每个网格所要做的就是响应 - 每列的百分比宽度，并让内容拉伸以填充列宽。

响应式设计

现在的问题就是：是否有可能自动伸展每条内容单独使用CSS来填补列？这取决于内容的类型，它是如何预期，当它延伸到行为，以及是否有任何空间与图形设计妥协。

通常，对于响应网站的图形设计，必须定制，以满足局限性响应式设计的（用具有什么不可行一个粗略的想法的平面设计师，什么是不）。但是......不能自动完成的任何事情都可以使用JavaScript来完成。

企图舒展内容相关搜索词：响应式设计，自适应的内容，Fluid Grid

注：“列”在这种情况下，可能只意味着用于浮动容器的百分比宽度为每件内容。传统意义上，它不一定意味着“物理”栏目。