首页 > html > column > CSS Layout - 如何设置列计数并使用媒体查询

CSS Layout - 如何设置列计数并使用媒体查询

column 【column】
我们想知道如何设置列计数并使用媒体查询。
代码展示 运行结果 

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
@media only screen and (min-width: 480px) {
  article p {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}
</style>
</head>
<body>
  <section>
    <article>
      <h1>FooBlip</h1>
      <p>This is a test. This is a test. This is a test. This is a test. 
      This is a test. This is a test. This is a test. This is a test. This is a test. 
      This is a test. This is a test. This is a test. This is a test. This is a test. 
      This is a test. This is a test. This is a test. This is a test. This is a test. 
      This is a test. This is a test. This is a test. This is a test. This is a test. 
      This is a test. This is a test. This is a test. This is a test. This is a test. 
      This is a test. This is a test. This is a test. This is a test. This is a test. 
      This is a test. This is a test. This is a test. This is a test. This is a test. </p>
    </article>
    <section>
</body>
</html>