基于关键变量的CSS调整

Question

我已经构建了一个动态大小的网格布局，可以在任何大小的分辨率(电话、平板电脑、桌面)中合理地适应，并处理调整大小，同时接近像素-完美(对不起，我是强迫症-我说“接近”，因为我的数学现在是坏的，你不能在一个奇怪大小的容器内容纳两个大小均匀的元素，而不在一侧填充1倍)。

不管怎么说，下面是我和JavaScript一起黑的链接。这是我想要成功的一个例子。调整底部窗格的宽度，看看我要做什么。

http://jsfiddle.net/langdonx/uFW2C/2/

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

所以我的问题..。我能用严格的CSS来完成这个任务吗？或者更多的CSS和更少的JavaScript？我的意思是基于屏幕宽度的动态大小的单元格？

以下是业务规则：

• 最大单元宽度:320 Max
• 每行最小#单元格:2
  • 如果使用CSS，这可能是不可能的，所以我可以确定Min单元宽度:在Galaxy Nexus上使用Chrome 178 (其端口模式为360‘d宽)。

​

• 单元格边框:5 2px和2 2px轮廓线
• 细胞间可见边距: 3px (边距实际上是5 5px，但outline流出)

在这个例子中，我每次调整单元格的大小，但在我的角度版本中，我相信只有样式才会更新。尽管如此，我可能可以通过调整大小来重新绘制table，但是我只需要根据文档宽度计算单元格宽度，那么.我不会因为使用table而感到兴奋。=[

-end疯狂咆哮

Answer 1

媒体查询

CSS媒体查询可能会使您非常接近CSS专用的解决方案。

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

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

响应设计

接下来的问题是:是否可以单独使用CSS自动扩展每一段内容以填充列？这取决于内容的类型，它在伸展时的表现，以及是否有与图形设计妥协的空间。

通常情况下，响应性网站的平面设计必须适应响应设计的局限性(平面设计师对什么是可行的和什么是不可行的有大致的概念)。但是..。任何不能自动完成的事情，都可以使用JavaScript来完成。

尝试扩展内容的相关搜索术语:响应设计、自适应内容、http://www.alistapart.com/articles/responsive-web-design/

注意:在本例中，“列”可能只是指为每一段内容使用的浮动容器的百分比宽度。在传统意义上，它不一定意味着“物理”列。