Question

我正在编写我的第一个Phonegap应用程序，而且我在处理所有不同的屏幕尺寸时有点头疼。因此，由于我的应用程序仅针对手机，我想我知道我的理想解决方案将如何工作，但我对如何实现它完全一无所知。

基本上，我希望整个页面的行为像图像一样。当屏幕变小时，我希望文本的实际字体大小减小，而不是保持相同的大小和包装成新的行，保持设计的所有间距和比例。我曾尝试仅使用百分比来定义边距，宽度，字体大小等，但它并没有像我一样完全正常工作。

Answer 1

如果您想要缩小/缩小设计的字体大小，间距和比例等图像，则必须相应地编写媒体查询。

@media only screen and (max-width: 550px) {
    .title {
        font-size:11px
    }
    .body-box {
        width:440px;
    }
}

@media only screen and (max-width: 600px) {
    .title {
        font-size:12px
    }
    .body-box {
        width:480px;
    }

}

@media only screen and (max-width: 650px) {
    .title {
        font-size:13px
    }
    .body-box {
        width:520px;
    }
}

这也有一些缺点。对于非常小屏幕的显示器或低分辨率显示器（大约350px），如果保持这个比例，它将是大约7px并且该尺寸太小而不能读取。如果有人在QHD标签（2160px）上看到，字体大小将是44px，这将非常大。

像您这样的应用程序的长期和完美解决方案将是启动响应式设计。

您可以使用Bootstrap开始设计HTML应用布局。它首先是响应式和移动式，它将保持布局。

否则，您可以使用onsen.io框架，这也是Cordova和Phonegap的响应式HTML5框架。

无论屏幕大小如何，我如何强制Phonegap应用程序保持相同的比例？

1 个答案: