手机上的字体大小答案

【问题标题】：font-size on mobile手机上的字体大小
【发布时间】：2013-03-11 08:26:24
【问题描述】：

我正在使用 HTML5 BoilerPlate。

我只想在移动设备上使某个块的字体大小变小。

我试过了，但是没用：

.searchresult {
    font-size: 0.5em;
    line-height: 1.4;
}
@media only screen and (min-width: 480px) {
    .search-result {
        font-size: 1em;
    }
}
@media only screen and (min-width: 768px) {
    .search-result {
        font-size: 1em;
    }
}
@media only screen and (min-width: 1140px) {
    .search-result {
        font-size: 1em;
    }
}

我认为在@media 下将其设为普通大小会起作用，但在我的 Mac 和移动设备上字体很小。

感谢您的帮助，谢谢！

【问题讨论】：

标签： css html5boilerplate

【解决方案1】：

那是因为你使用的是min-width

你的 Mac（可能是大屏幕）和移动设备是 min-width 480 & 768 & 1140。

要使其在移动设备和桌面设备上有所不同，您应该这样做（保留您的实际代码）：

.searchresult {
    font-size: 0.5em;
    line-height: 1.4;
}
@media only screen and (min-width: 480px) {
    .search-result {
        font-size: 1em;/* mobile font-size */
    }
}
@media only screen and (min-width: 768px) {
    .search-result {
        font-size: 1.4em;/*overrule for big screens*/
    }
}
@media only screen and (min-width: 1140px) {
    .search-result {
        font-size: 1.4em;/*another overrule for even bigger screens*/
    }
}

【讨论】：

【解决方案2】：

如果您想定位小型设备，您可以使用此语法。

@media only screen and (max-device-width: 480px) {
 .search-result {
    font-size: 1em;
 }
}

如果您想了解更多有关媒体查询的信息，最好查看this。 Here是其他移动设备的列表，我觉得也很有用。

【讨论】：