How to apply responsiveness to texts?

Navigation
1
I'm using the front end of a responsive site, I've read some materials on how to set up responsive sites, and I'm using 'EMS' instead of pixels in font sizes, but they do not change according to screen resolution. Ex: I stated in the body: 

body{
    font-size: 62.5%;
}

And secondly, this technique would cause that when I wanted to by the font size in 'EM' I would only do ex: 20px = 2em; 15px = 1.5em; but it did not work: /

    
asked by anonymous 09.10.2014 / 21:15

2 answers

5

What you are looking for is called Viewport Percentage Units which are units relative to screen size:

See example on JSFiddle

In JSFiddle, manipulate the width of the preview window to see the text to shrink / increase. 

p{
    font-size: 16px; font-size: 4vw;
}

Essentially, the values are:

1 v == 1% of the initial text size on the screen:

  • vw (viewport width);
  • vh (viewport height);
  • vmin (the smallest of vw or vh );
  • vmax (the greater of vw or vh ).

You can read more about this at:

CSS Values and Units Module Level 3: 5.1.2 Viewport-percentage lengths .

Response Credits for the @jbenjohnson user in SOEN in this answer .

    
09.10.2014 / 22:16
0

Something that I think might help you is the understanding of the REMs, which is a very interesting stop.

Although it is an English text, it is completely valid to read this link: link

    
10.10.2014 / 19:04
Upload menu after login with AngularJS fade in / fade out does not run