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;
 }
}

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

Answer 2

这是因为您使用的是min-width

你Mac（可能是大屏幕）＆amp;移动 min-width 480＆amp; 768＆amp; 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 个答案: