rozmiar czcionki na telefonie komórkowym

Question

Używam HTML5 BoilerPlate.

Chcę, aby rozmiar czcionki określonego bloku był TYLKO na urządzeniach mobilnych.

próbowałem tego, ale to nie działa:

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

myślałem co zwykły rozmiar pod @media będzie działać, ale jest mała czcionka na moim Mac i Mobile.

Doceniam każdą pomoc, dzięki!

Answer 1

To dlatego, że używasz min-width

You Mac (prawdopodobnie duży ekran) & mobile jestmin-width 480 & 768 & 1140.

Aby go dla mobilnych & pulpit różne, należy to zrobić (zachowując swój rzeczywisty kod):

.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

Jeśli chcesz kierować na urządzenia małe urządzenia, możesz użyć tej składni.

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

Jeśli chcesz wiedzieć więcej na temat zapytań mediów, to lepiej, aby sprawdzić this out. Here to lista innych urządzeń mobilnych, uważam, że jest przydatna.