How to apply responsiveness to texts?

Asked

Viewed 147 times

1

Guys I’m doing the front end of a responsive site, I read some materials on how to build responsive sites etc, I’m using 'EMS' instead of pixels in the font sizes, but they do not change according to the screen resolution.. Ex: I declared on the body:

body{
    font-size: 62.5%;
}

And as I read, this technique would cause when I wanted to put the font size in 'EM' I would only do ex: 20px = 2em; 15px = 1.5em; but it didn’t work :/

html css responsive-layout
  • 1

    Would you happen to have the source where you got this information? I’ve never heard of it before... P.S. I confirm that this strange technique works: http://jsfiddle.net/qfpke31c/1/ The problem is that attributing the font to a certain percentage seems to me to be relative to the current font size - and not to the current screen size.

  • 3

    @mgibsonbr This technique assumes that browsers use 16px as a standard of font-size body, and that the values in em are inherited. But it’s really not a technique for adjusting according to resolution.

2 answers

5


What you’re looking for is called Viewport Percentage Units which are units in relation to screen size:

See example in Jsfiddle

In Jsfiddle, manipulate the width of the preview window to see the text 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 greatest of vw or vh).

You can read more about this on:

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

User response credits @jbenjohnson on SOEN in this answer.

0

Browser other questions tagged html css responsive-layout

You are not signed in. Login or sign up in order to post.