2

我构建了一个动态大小的网格布局，可以合理地适应任何大小的分辨率（手机、平板电脑、台式机）并处理大小调整，同时接近像素完美（对不起，我是强迫症——我说“接近“因为我的数学现在被打破了，你不能在一个奇数大小的容器内放置两个大小均匀的元素，而不会在一侧有 1px 的填充）。

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

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

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

所以我的问题......我可以用严格的 CSS 来解决这个问题吗？或者更多的 CSS 和更少的 JavaScript？我的意思是根据屏幕宽度动态调整大小的单元格？

以下是业务规则：

  • 最大单元格宽度：320px
  • 每行最少 # 个单元格：2
    • 这对于 CSS 来说可能是不可能的，所以我可以在我的 Galaxy Nexus 上设置 Min Cell Width: 178 for Chrome（其肖像模式为 360px 宽）
  • 单元格边框：5px，轮廓为 2px
  • 单元格之间的可见边距：3px（边距实际上是 5px，但会outline渗出）

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

-结束疯狂的咆哮

4

1 回答 1

2

媒体查询

CSS 媒体查询可能会让您非常接近纯 CSS 的解决方案。

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

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

响应式设计

那么问题就变成了：是否可以单独使用 CSS 自动拉伸每条内容以填充列？这取决于内容的类型、拉伸时的预期行为以及图形设计是否有任何妥协的余地。

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

尝试拉伸内容的相关搜索词：响应式设计、自适应内容、流体网格

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

于 2013-03-27T06:16:41.167 回答