手机上的字体大小

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

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