响应式 CSS 在移动设备上具有不同的 rem 大小
我正在使用 Bulma CSS 框架，但我根本无法让我的网站像他们的主页一样具有响应性。
该网站是 活的。我的 < 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 上的开发人员工具将两个站点的主页上的视口设置为移动设备来测试这一点。
尝试添加此元标记
<meta name="viewport" content="width=device-width, initial-scale=1">
这告诉浏览器使页面适合移动屏幕，否则它会为您提供一个更宽的“桌面站点”
| 归档时间： |
|
| 查看次数： |
1216 次 |
| 最近记录： |