css - 手机上的字体大小

Question

我正在使用 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 和移动设备上的字体很小。

我会很感激任何帮助，谢谢！

Answer 1

如果要针对小型设备，可以使用此语法。

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

如果您想了解有关媒体查询的更多信息，最好查看一下。这是其他移动设备的列表，我认为它也很有用。

Answer 2

那是因为你正在使用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*/
    }
}