基于关键变量的CSS大小调整

我已经建立了一个动态大小的网格布局，可以合理地适应任何大小的分辨率（手机、平板电脑、桌面）和处理大小调整，同时接近像素完美（对不起，我是强迫症——我说“接近”因为我的数学现在被打破了，你不能在一个奇数大小的容器中放入两个大小相等的元素，而不在一侧填充1px）

无论如何，下面是一个链接，指向我用JavaScript破解的东西。这是我试图实现的一个例子。调整底部窗格的宽度一点，看看我想要什么

它有一些丑陋的手动JavaScript，后来被移植到Angular，但仍然是计算所有样式的丑陋JavaScript

所以我的问题是。。。我能用CSS完成这个吗？还是更多的CSS和更少的JavaScript？我指的是根据屏幕宽度动态调整单元格大小

以下是业务规则：

• 最大单元格宽度：320px
• 每行最少#个单元格：2
  • 这对于CSS来说可能是不可能的，所以我可以选择最小单元格宽度：178用于Galaxy Nexus上的Chrome（其portait模式为360px宽）
• 单元格边框：5px，轮廓为2px
• 单元格之间的可见边距：3px（边距实际上是5px，但

  轮廓

  出血）

在这个例子中，我在每次调整大小时都会重新绘制单元格，但在我的角度版本中，我相信只有样式得到更新。也就是说，我可以在调整大小时重新绘制

表

，但我只需要根据文档宽度计算单元格宽度，而且。。。如果使用

表

，我不会感到激动=[

---

-结束疯狂的咆哮

媒体查询

可能会让您非常接近一个CSS专用的解决方案

这里的关键概念是根据浏览器的宽度使用不同的布置格线，以改变列的数量

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

响应性设计

接下来的问题是：是否有可能单独使用CSS自动拉伸每一部分内容以填充该列？这取决于内容的类型、拉伸时的预期行为，以及图形设计是否有妥协的余地

通常情况下，响应式网站的图形设计必须根据响应式设计的局限性进行定制（图形设计师大致知道什么是可行的，什么是不可行的）。但是……任何不能自动完成的事情都可以使用JavaScript完成

尝试扩展内容的相关搜索词：响应式设计、自适应内容、

注意：本例中的“列”可能只是指浮动容器用于每一内容的宽度百分比，而不是传统意义上的“物理”列