Question

我正在使用Kube CSS framework并且在响应网格方面遇到了麻烦。

我有这样的html，它取自第一个例子here

<body>

  <div class="units-row">
      <div class="unit-50">Hello world</div>
      <div class="unit-50">It's Kube Grid System</div>
  </div>

  <style>
    .unit-50 {
      text-align: center;
      background-color: purple;
      color: white;
      padding: 2em;
    }
  </style>

</body>

该页面在桌面上的示例中呈现相同的内容

page on desktop

问题在于我在移动设备上。当我在Kube网格示例上打开chrome dev工具时，列会响应并获得100％的宽度。

kube responsive

这就是我的页面在移动设备上的样子

my mobile

当Kubes网格示例为375px时，我的屏幕宽度似乎> 900px。我没有加载任何可以修改它的外部css。

我知道我的网站仍然具有响应能力，因为当我调整浏览器窗口大小时，列的宽度达到100％。

responsive mine

出于某种原因，在移动设备上我的屏幕宽度远远高于Kube CSS网站。我是否需要做任何事情才能让我的网页以这种方式运作？

这真让我感到困惑，因为它看起来应该有效。

Answer 1

因此，经过数小时的谷歌搜索（请注意，您可能只需要几分钟搜索正确的内容），将此元标记放在文档的头部

<meta name="viewport" content="width=device-width, initial-scale=1">

将使网格在移动设备上响应

Kube CSS网格在移动设备上无法响应

1 个答案: