html - 如何设置从网格到 block 显示的 div 样式？

Question

我的 html 中有一些 div，我想在桌面上并排显示并在移动设备上堆叠显示。我使用网格在桌面上显示它们。在我的 css 文件中，我添加了一个媒体查询

@media(max-width:768px){
divselector {
display: block
}
}

但是 div 仍然并排出现。我可能做错了什么？

Answer 1

在这里查看 jsfiddle

<div class="container">
   <div class="a"></div>
   <div class="b"></div>
</div>

            .container {
          font-size: 0;
        }

        .container div {
          display: inline-block;
          width: 100px;
          height: 30px;
          background: #000000;
          font-size: 12px;
        }

        .container div.a {
          width: 100px;
          background: #555555;
        }

        .container div.b {
          width: 100px;
          background: #333333;
        }

        @media screen and (max-width: 992px) {
          .container {
            display: block;
          }
        }

        /* On screens that are 600px or less */
        @media screen and (max-width: 600px) {
          .container {
            display: block;
          }
        }