如何使用css在cordova（HTML移动）应用程序中响应定位元素

Question

我正在通过 Cordova 开发一个应用程序，并在 Chrome 移动检查器和我的 nexus 5 上进行测试，并且在响应定位元素时遇到问题，并且在 chrome-test 视图和设备本身。主要问题是找到一个一致的高度单位，我可以使用级联边距底部来定位元素。页眉或页脚很好，这是我无法保持位置的主要内容。

例如，在这个随机的应用程序主屏幕上，我从谷歌上抓取了（见下面的链接），我如何将这些按钮保持在同一个位置。

http://melaniechoisy.files.wordpress.com/2012/05/iphone-app-homepage.png

我想它是这样构建的：

<div margin-bottom:5%>
<img logo margin-bottom:5%>
<button margin-bottom:5%>
<button margin-bottom:5%>
<button margin-bottom:5%>
<button>

但是，考虑到我在使用不同高度单位时遇到的以下问题，我不确定上述内容如何保持一致：

我尝试过使用 em（将 body 字体大小设置为 12px，与 web 检查相比，我仍然在设备上获得大约 10-15% 的高度差），%'s（基于 %'s 的绝对定位会导致问题缩小视口的软件键盘），vh（与 %'s 相同的问题）。 在过去 2 天对此进行了研究之后，我还没有找到任何人在定位方面遇到类似问题。我觉得我在这里缺少一些基本的东西。

TLDR：找不到使用cordova 和CSS 在移动设备上一致定位元素的方法。 em、vh 和 % 的变化太大而无法保持一致。我错过了什么？ 我应该在 cordova 应用程序中使用什么单位来表示高度？

Answer 1

最后，我使用 em 来获取高度，并使用媒体查询更改基本字体大小以帮助补偿其他屏幕尺寸。目前似乎工作得很好