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

Question

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

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

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

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

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

我读了一些关于使用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