Font size relative to the user s screen resolution

Question

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

User · Accepted Answer

media screen and  max-width   320px      body or yourdiv element         font  lt size gt px em rm         media screen and  max-width   1204px      body or yourdiv element         font  lt size gt px em rm          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

User · Answer

This worked for me    body      font-size  calc  minimum size      maximum size  -  minimum size       100vw -  minimum  viewport width       maximum viewport width  -  minimum viewport width           Explained in detail here   https   css-tricks com books volume-i scale-typography-screen-size

User · Answer

You might try this tool  http   fittextjs com   I haven t used this second tool  but it seems similar  https   github com zachleat BigText

User · Answer

Not using media queries is nice because it allows scaling the font size gradually   Using vw units will adjust the font size relative to the view port size   Directly converting vw units to font size will make it difficult to hit to the sweet spot for both mobile resolutions and desktop   I recommend trying something like   body       font-size  calc 0 5em   1vw       Credit  CSS In Depth

User · Answer

Not sure why is this complicated  I would do this basic javascript   lt body onresize  document getElementsByTagName  body   0  style   font-size      document body clientWidth  12 1280     px    gt    Where 12 means  12px at 1280 resolution  You decide the value you want here

User · Answer

You can use em     px  But in combination with media-queries See 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

User · Answer

New Way  There are several ways to achieve this   CSS3 supports  new dimensions that are relative to view port  But this doesn t work in android    3 2vw   3 2  of width of viewport 3 2vh   3 2  of height of viewport 3 2vmin   Smaller of 3 2vw or 3 2vh 3 2vmax   Bigger of 3 2vw or 3 2vh  body       font-size  3 2vw       see css-tricks com      and also look at caniuse com        Old Way   Use media query but requires font sizes for several breakpoints   body       font-size  22px     h1      font-size 44px      media  min-width  768px        body             font-size  17px           h1             font-size 24px          Use dimensions in   or rem  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       Root Ems    rem   The    rem    is a scalable unit  1rem is equal to the font-size of the body html  for instance  if the font-size of the document is 12pt  1em is equal to 12pt  Root Ems are scalable in nature  so 2em would equal 24pt   5em would equal 6pt  etc    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

User · Answer

I ve developed a nice JS solution - which is suitable for entirely-responsive HTML  i e  HTML built with percentages    I use only  em  to define font-sizes  html font size is set to 10 pixels   html     font-size  100     font-size  62 5      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

User · Answer

I ve created a variant of https   stackoverflow com a 17845473 189411   where you can set min and max text size in relation of min and max size of box that you want  check  size  In addition you can check size of dom element different than box where you want apply text size   You resize text between 19px and 25px on  size-2 element  based on 500px and 960px width of  size-2 element  resizeTextInRange 500 960 19 25   size-2      You resize text between 13px and 20px on  size-1 element  based on 500px and 960px width of body element  resizeTextInRange 500 960 13 20   size-1   body      complete code are there https   github com kiuz sandbox-html-js-css tree gh-pages text-resize-in-range-of-text-and-screen src  function inRange  x min max        return Math min Math max x  min   max      function resizeTextInRange minW maxW textMinS textMaxS  elementApply  elementCheck 0         if elementCheck  0  elementCheck elementApply        var ww     elementCheck  width        var difW   maxW-minW      var difT   textMaxS- textMinS      var rapW    ww-minW       var out  difT 100   rapW  difW 100   textMinS      var normalizedOut   inRange out  textMinS  textMaxS         elementApply  css  font-size  normalizedOut  px         console log normalizedOut         function          resizeTextInRange 500 960 19 25   size-2        resizeTextInRange 500 960 13 20   size-1   body          window  resize function              resizeTextInRange 500 960 19 25   size-2            resizeTextInRange 500 960 13 20   size-1   body

User · Answer

lt script gt  function getFontsByScreenWidth actuallFontSize  maxScreenWidth        return  actualFontSize   maxScreenWidth    window innerWidth        Example  fontSize   18  maxScreenWidth   1080  fontSize   getFontsByScreenWidth fontSize  maxScreenWidth    lt  script gt    I hope this will help  I am using this formula for my Phase game

[css] Font size relative to the user's screen resolution?

Examples related to css

Examples related to measurement