Размер шрифта на мобильном телефоне

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 - это список других мобильных устройств, и я думаю, что это тоже полезно.