Responsive font as screen size is adjusted

Asked

Viewed 4,779 times

4

I have a responsive website only the lyrics even putting in %, Rem or EM is not adjusting.

Then it is possible to make the font change for example a window with the length in 1000px and font-size in 1.8em (18px), up the window length to 2000px then the font-size rises to the equivalent something like 36px?

I want the font to adjust its value as the window or grid dimensions change.

css css3 responsive-layout
  • 3

    A very interesting text to complement the concepts: http://blog.popupdesign.com.br/design-responsivo-grids-e-text/

  • Just on this site we found an example, I’ve tried more does not match the text in the popupdesign menu; in the popup when the browser height the font, note this carefully in maximizing and minimizing. @Delfino

  • possible duplicate of Font-size for responsive pages

  • In case I have to Set a font-size for each resolution? @media only screen and (max-width: 1000px) { 
 body { font-size: 1.8rem; } 
}
@media only screen and (max-width: 2000px) { 
 body { font-size: 3.6rem; }
}
 I could check this on popupdesigner @Delfino @Fabio Mingorance

2 answers

4

How about this code example? I found this blog post in Portuguese, but the summary of the opera is that 1vw is 1% of screen width, 1vh is 1% of the screen height, and vmin and vmax are 1% of the smallest and largest size, respectively. The first two units of measurement work in any IE 9+.

(you can drag grid partitions in Jsfiddle to see the effect)

4


@media only screen and (max-width: 1000px) {    
       body { font-size: 18px; }    
}
@media only screen and (max-width: 2000px) {    
       body { font-size: 36px; }
}

Just one detail, the measure in for sources has no direct proportional relationship in px Yes with the zoom of each browser. Generally 1in is equivalent to 16px in most monitors.

  • Friend so far I know the problem is that when I have @media only screen and (min-width: 700px)and (max-width: 1000px) does not change the source or is not readjusted, it continues with the same value in px mesmo colocando em EM % ou REM @Fabio Mingorance

Browser other questions tagged css css3 responsive-layout

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