网站元素和字体在移动设备上太小

Question

我刚刚完成了新项目的设计和编码。但我需要它在手机上运行良好。我将屏幕大小调整为 350~400px 宽度，然后开始编码并向其中添加一些媒体查询。在重新设计的浏览器中看起来很棒。我已经削减了一些元素和功能，一切都很好......直到我用我的智能手机测试它

屏幕不大。小于 4'（可能是 3.5）。我在代码中添加了一些警告，发现它的宽度是 980px。几乎比我在调整大小的浏览器上的测试大 3 倍。

一切都太小了。其他方面都很好：媒体查询正在运行，我在代码中所做的削减也没有问题，但你几乎看不到我手机中的内容。这当然不是我想要的。

我希望它看起来像一个 App，实际上它在重新设计的浏览器上看起来像一个应用程序。

您如何创建响应式网站来处理此类问题？

我读了一些关于使用 EM（还有一个叫做 REM 的新东西）单位的东西，但我仍然很困惑。我是否必须将所有 px 更改为 em？

而且我知道您可以在 html 或 body 标签中设置 font-size，所有其他元素都将从它们继承。那是一种方法吗？你平常都做什么？有什么技巧吗？我没有使用 bootstrap 也没有使用任何其他前端框架。

Answer 1

您可以尝试添加 viewport <meta> 标签：

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

• Using the viewport meta tag to control layout on mobile browsers

Answer 2

使用媒体查询 (Link) 和百分比 (%)，16px（默认字体大小）= 100%。希望对你有帮助。