font-size sul cellulare

Question

Sto usando l'HTML5 BoilerPlate.

Desidero rendere le dimensioni dei caratteri di un determinato blocco SOLO su dispositivi mobili.

Ho provato questo, ma non ha funzionato:

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

ho pensato che lo rende dimensione ordinaria sotto la @media avrebbe funzionato, ma il carattere è piccolo sul mio Mac e mobile.

Apprezzerei qualsiasi aiuto, grazie!

Answer 1

Questo è dovuto al fatto che si sta utilizzando min-width

È Mac (probabilmente grande schermo) & cellulare èmin-width 480 & 768 & 1140.

di farlo per cellulari & diverso desktop, lo si dovrebbe fare (mantenere il codice vero e proprio):

.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

Se si desidera utilizzare come target i dispositivi , è possibile utilizzare questa sintassi.

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

Se vuoi sapere di più su media query, è meglio controllare this out. Here è la lista per gli altri dispositivi mobili, penso che sia utile anche.