移动设备上的字体大小

Question

我正在使用HTML5样板文件。

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

我尝试了以下方法，但它没有起作用：

.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和移动设备上，字体很小。

如果有任何帮助，将不胜感激，谢谢！

- Robert Dodd

Answer 1

如果你想针对小设备进行定位，可以使用以下语法。

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

如果您想了解更多关于媒体查询的内容，最好查看这个链接。在这里有其他移动设备的列表，我认为它也很有用。

- agriboz

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*/
    }
}

- Mark