手机上的字体大小

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

Answer 2

如果你想要目标小设备你可以使用这种语法。

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

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