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

【问题标题】：Best way to alter font-size for different device resolutions in HTML在 HTML 中为不同设备分辨率更改字体大小的最佳方法
【发布时间】：2012-12-31 18:19:59
【问题描述】：

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

【问题讨论】：

标签： javascript html css cordova font-size

【解决方案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 等），但这应该可以帮助您入门！

【讨论】：

是的，我已经研究过了，但是使用它我必须为许多分辨率编写 css，所以寻找其他方式。
我认为这只是当今开发响应式网站时的现实！

【解决方案2】：

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

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

【讨论】：

是的，我已经研究过了，但是使用它我必须为许多分辨率编写 css，所以寻找其他方式。