Font size relative to the user's screen resolution?

Font size relative to the user's screen resolution?

I have a fluid website and the menu is 20% of its width. I want the font size of the menu to be measured properly so it always fits the width of the box and never wrap to the next line. I was thinking of using "em" as a unit but it is relative to the browser's font size, so when I change resolutions the font size stays the same.

Tried also pts and percentages. Nothing works as I need it...

Give me a hint of how to proceed, please.

Answer by agent47 for Font size relative to the user's screen resolution?

You might try this tool: http://fittextjs.com/

I haven't used this second tool, but it seems similar: https://github.com/zachleat/BigText

Answer by Miljan Puzovi for Font size relative to the user's screen resolution?

You can use em, %, px. But in combination with media-queries Se this LINK to learn about media-queries. Also, CSS3 have some new values for sizing things relative to the current viewport size: vw, vh, and vmin. See link about that.

Answer by Arpit Srivastava for Font size relative to the user's screen resolution?

@media screen and (max-device-width : 320px)  {    body or yourdiv element    {      font:px/em/cm;    }  }  @media screen and (max-device-width : 1204px)  {    body or yourdiv element    {      font:px/em/cm;    }  }  

You can give it manually according to screen size of screen.Just have a look of different screen size and add manually the font size.

Answer by Elad Ziv for Font size relative to the user's screen resolution?

I've developed a nice JS solution - which is suitable for entirely-responsive HTML (i.e. HTML built with percentages)

1. I use only "em" to define font-sizes.

2. html font size is set to 10 pixels:

   html {    font-size: 100%;    font-size: 62.5%;  }  

3. I call a font-resizing function on document-ready:

// this requires JQuery

function doResize()  {        // FONT SIZE      var ww = $('body').width();      var maxW = [your design max-width here];      ww = Math.min(ww, maxW);      var fw = ww*(10/maxW);      var fpc = fw*100/16;      var fpc = Math.round(fpc*100)/100;      $('html').css('font-size',fpc+'%');    }  

Answer by aWebDeveloper for Font size relative to the user's screen resolution?

There are several ways to achieve this

Use media query but requires font sizes for several breakpoints

    body      {          font-size: 22px;       }      h1      {         font-size:44px;      }        @media (min-width: 768)      {         body         {             font-size: 17px;          }         h1         {             font-size:24px;         }      }  

Use dimensions in % or em. Just change the base font size everything will change. Unlike previous one you could just change the body font and not h1 everytime or let base font size to default of the device and rest all in em

1. ?Ems? (em): The ?em? is a scalable unit. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc..
2. Percent (%): The percent unit is much like the ?em? unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

see kyleschaeffer.com/....

CSS3 supports new dimensions that are relative to view port. But this doesn't work in android

1. 3.2vw = 3.2% of width of viewport
2. 3.2vh = 3.2% of height of viewport
3. 3.2vmin = Smaller of 3.2vw or 3.2vh

4. 3.2vmax = Bigger of 3.2vw or 3.2vh

   body  {      font-size: 3.2vw;  }  

see css-tricks.com/.... and also look at caniuse.com/....

Answer by user3334188 for Font size relative to the user's screen resolution?

Not sure why is this complicated. I would do this basic javascript

Where 12 means 12px at 1280 resolution. You decide the value you want here

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72