手機上的字體大小

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是其他移動設備的列表，我認爲它也很有用。