响应 CSS 在移动设备上具有不同的 rem 大小

Question

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

站点是live。我的 < html > 具有相同的字体大小，我的 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">

这会告诉浏览器让页面适合移动屏幕，否则它会给你一个 'desktop site' 更宽的

响应 CSS 在移动设备上具有不同的 rem 大小

Responsive CSS has different rem sizes on mobile

html

css

bulma