css font size change not sizing correctly in smartphone view

3 comments

1. Using font-size in % should help you to change size relatively. But you should keep in mind line-height property.

   Log in to Reply

2. You could try media queries?

   html { font-size: 62.5%; }
   body { font-size: 1em;}
   
       @media (max-width: 300px) {
           html { font-size: 70%; }
       }
   
       @media (min-width: 500px) {
           html { font-size: 80%; }
       }
   
       @media (min-width: 700px) {
           html { font-size: 120%; }
       }
   
       @media (min-width: 1200px) {
           html { font-size: 200%; }
   }
   

   Try this 🙂 http://jsfiddle.net/yv5eu/

   Log in to Reply

3. Try this technique for better resizing of text. Than with media queries you can set different font sizes.

   http://snook.ca/archives/html_and_css/font-size-with-rem
   http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/
   Support: http://ahedg.es/w/rem.html

   Log in to Reply