Kube CSS grid在手机上没有响应

问题描述：

我正在使用Kube CSS framework，并且在响应式网格中遇到麻烦。Kube CSS grid在手机上没有响应

我有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

它看起来像我的屏幕宽度> 900px当它是375px上Kubes电网的例子。我没有任何外部的CSS被加载，将修改此。

我知道我的网站仍然是响应式的，因为当我调整浏览器窗口的大小时，列的宽度为100％。

responsive mine

有关我的手机屏幕宽度某种原因比库贝CSS网站高得多。我需要做任何事情来让我的页面以这种方式行事吗？

这真的让我感到困惑，因为它看起来应该可以工作。

答

所以谷歌搜索的时间（请注意寻找正确的事情的大概只需几分钟），把这个元标记的文档

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

的头将使电网响应移动

后

仅供参考，这在其快速入门指南中进行了说明：https：//imperavi.com/kube/docs/quick-start/ – 10basetom

Kube CSS grid在手机上没有响应

相关推荐