在HTML中更改不同设备分辨率的字体大小的最佳方法

Question

我正在为Android开发一个phonegap应用程序，我使用jquery mobile设计了UI。我想知道使用css或javascript动态改变不同设备的文本字体大小的最佳方法是什么。

Answer 1

媒体查询是你的朋友！

在您的CSS文档中，使用类似于下面的代码（示例适用于iPhone 3-4 + Retina）：

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (max-device-height: 480px) and (orientation:portrait) {
    p {
        font-size: 12px;
    }
}

你需要提供一些这样的查询来定位大多数设备（ipad，iphone等），但这应该让你入门！

Answer 2

看看media queries。例如，此处的嵌套CSS规则仅适用于宽度至少为500像素的设备：

@media (min-width:500px) {
    #main {
        font-size: 15pt;
    }
}