css - 手机上的字体大小

Question

我正在使用 HTML5 BoilerPlate。

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

我试过了，但是没用:

.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

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