Best IT Recipes

Font size relative to user screen resolution?

I have a fluid site, and the menu is 20% of its width. I want the font size of the menu to be measured correctly, so it always matches the width of the window and never wraps on the next line. I was thinking about using "em" as the unit, but that concerns the font size of the browser, so when I change the resolution, the font size remains the same.

I also tried pts and percentages. Nothing works the way I need ...

Let me know how to proceed, please.

+56
css
Aug 02 2018-12-12T00:
source share
8 answers
@media screen and (max-width : 320px) { body or yourdiv element { font:<size>px/em/rm; } } @media screen and (max-width : 1204px) { body or yourdiv element { font:<size>px/em/rm; } }

You can give it manually depending on the screen size of the screen. Just look at the screen size and manually add the font size.

+40
Aug 02 2018-12-12T00:
source share

You can use em , % , px . But in conjunction with media-queries Look at this link to learn about media queries. In addition, CSS3 has several new meanings for sizing relative to the current viewport size: vw , vh and vmin . See the link for this.

+38
Aug 02 2018-12-12T00:
source share

I developed a nice JS solution that is suitable for fully responsive HTML (i.e. HTML built with percentages)

  • I use only "em" to determine the font size.

  • The html font size is 10 pixels:

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

  • I call the font change function in the finished document:

// 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+'%'); }
+17
Jul 24 '13 at 21:54
source share

There are several ways to achieve this.

Use a media query , but this requires font sizes for multiple breakpoints

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

Use sizes in % or em . Just change the size of the base font, everything will change. Unlike the previous one, you can simply change the body font, not h1 each time, or allow the default size of the base font of the device and leave everything in em

  • "Ems" (em) : "em" is a scalable unit. The value of em is equal to the current font size, for example, if the document font size is 12pt, 1em is 12pt. Ems are scalable in nature, so 2em will be equal to 24pt, .5em will be equal to 6pt, etc.
  • Percentage (%) : A percentage unit is similar to an "em" block, except for a few fundamental differences. First of all, the current font size is 100% (i.e. 12pt = 100%). When using a percentage unit, your text remains fully scalable for mobile devices and for accessibility.

see kyleschaeffer.com / ....

CSS3 supports new dimensions related to port look. But this does not work in android

  • 3.2vw = 3.2% of the width of the viewport
  • 3.2vh = 3.2% of the viewport height
  • 3.2vmin = Less than 3.2vw or 3.2vh

  • 3.2vmax = Greater than 3.2vw or 3.2vh

     body { font-size: 3.2vw; }

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

+16
Feb 24 '14 at 7:41
source share

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

I have not used this second tool, but it seems similar: https://github.com/zachleat/BigText

+5
Aug 02 2018-12-12T00:
source share

I don’t know why it is difficult. I would do this basic javascript

 <body onresize='document.getElementsByTagName("body")[0].style[ "font-size" ] = document.body.clientWidth*(12/1280) + "px";'>

Where 12 means 12px at a resolution of 1280. You decide what value you want here.

+3
May 27 '15 at 7:40
source share

I have created a variant of https://stackoverflow.com/a/312960/

where you can set the minimum and maximum text size in relation to the minimum and maximum size of the field that you want to "check". In addition, you can check the size of the dom element other than the field in which you want to apply the text size.

You change the text size between 19px and 25px on the # size-2 element based on the width of 500px and 960px of the # size-2 element

 resizeTextInRange(500,960,19,25,'#size-2');

You change the text size between 13px and 20px on the element # size-1, based on the width of the body of the body 500px and 960px.

 resizeTextInRange(500,960,13,20,'#size-1','body');

the full code is 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'); }); });
+2
Sep 06 '16 at 15:22
source share

The following code will work.

 @media (max-width: <size>em) { <.class> { font-size: <size>em } }

max-width can be replaced with min-width Used to determine when this code will be activated / deactivated based on screen size.

<.class> is the object you want to use.

font-size can be replaced with many other CSS properties.

I recommend using the following code to enable @media function.

em can be replaced with any other size variable: px % vh vw (etc.)

 <meta name="viewport" content="width=device-width, initial-scale=1">

Here you can find more options for @media

0
Mar 30 '18 at 23:34
source share


More articles:


All Articles