手机中的网站元素和字体太小

Question

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

屏幕不大。少于4＆＃39; （可能是3.5）。我在代码中添加了一些警报，并意识到其宽度为980px。几乎是我在调整大小的浏览器上测试的3倍。

一切都太小了。其他的东西都很棒：媒体查询正在运行，我在代码中所做的削减也可以，但你几乎看不到我手机中的内容。这当然不是我想要的。

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

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

我读过有关使用 EM （以及有一些新的称为REM）单位的内容，但我仍然对此感到困惑。我是否必须将所有px更改为em？

而且我知道您可以在font-size或html标记中设置body，其他所有元素都会从它们继承。这是一个approch？你平常都做什么？有诀窍吗？我没有使用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％。我希望它有所帮助。