css - 如何让 Cordova 应用程序的 Tabbar 很好地适应各种手机屏幕尺寸？

Question

我在 Meteor 和 React 上开发的 Cordova 应用程序中有一个标签栏组件。我想确保标签栏(或页脚)在主体可滚动时始终放置在移动屏幕的底部。图片中的模型展示了一个带有可滚动内容和标签栏的移动屏幕。其次，我想确保标签栏能够很好地适应不同尺寸的不同移动设备。
我不确定这两个是否与 CSS 或视口(viewport)设置或 Cordova config.xml 完全相关。满足这两种需求的最佳方法是什么？

Answer 1

我会创建一个带有 id“tabBar”和一些 CSS 的 html div，如下所示:

#tabBar {
position:fixed;
bottom:0;
background:#000;
color:#fff;
width:100%;
height:50px;}

然后您可以将图标 div 与类相关联，例如:

#tabBar .icon {
float:left;
width:25%;
height:100%;
color:#ffffff;}