Question

我正在使用Bulma CSS框架，我无法让我的网站像他们的主页一样响应。

该网站为live。我的＆lt; html＆gt;具有相同的字体大小，我的dom结构与bulma的主页面相同。然而我的手机看起来很糟糕。

以下是我的HTML页面的片段：

<html>

<body>
  <section class="hero">
    <div class="hero-body has-text-centered">
      <div class="container">
        <div>
          <h1 class="title">Tiny Text!</h1>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

<html class="route-index">

    <body class="layout-default" style="zoom: 1;">
      <section class="hero is-medium">
        <div class="hero-body has-text-centered">
          <div class="container">
            <h1 class="title">Somehow big text?</h1>
          </div>
        </div>
      </section>
    </body>

</html>

布尔玛的页面：

我的页面：

您可以通过chrome上的开发人员工具对这两个网站的主页上的视口设置为移动设备进行测试。

Answer 1

尝试添加此元标记

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

这告诉浏览器将页面调整到移动屏幕，否则它会为您提供一个桌面网站＆＃39;哪个更宽

自适应CSS在移动设备

1 个答案: