css - 如何在响应式设计中使用 CSS3 多列模块？

Question

我想使用 CSS3 多列模块，但我需要弄清楚一些事情。当我将分辨率从小更改为大或从小更改为大时，列的内容会分崩离析。因此，如果我在 3 列中有 3 个段落，当我调整大小时，文本会展开并变得不稳定，而不是留在其列中。我该如何解决？希望这是有道理的，谢谢。

这是我的 fiddle 的链接:

http://jsfiddle.net/Midtone/2RJ2J/

(请原谅乱七八糟的)

Answer 1

媒体查询:

@media screen and (max-width:500px){
     body p {
     -webkit-column-count: 1;
     ...
     }

Demo

对于更大的屏幕尺寸，您可以在主体上放置一个 max-width，或者使用类似的技术但添加更多列。但是，即使有人有足够大的屏幕，我也不确定阅读 10 列的内容是否可取。