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

Question

我想使用CSS3多列模块，但我需要找出一些东西。当我将分辨率从小改为大或反之亦然时，列的内容就会分散。所以如果我在3列中有3个段落，当我调整大小时，文本会展开，变得不稳定，而不是保持在它的列中。我该如何解决这个问题?希望这是有意义的，谢谢你。

这是我的小提琴的链接:

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

(请原谅)

Answer 1

媒体查询:

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

演示

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