Can the font size be% of the container size in css / css3?

Question

Can the font size be% of the container size in css / css3?

I have a container:

<div id="container"><h1>LONG TITLE LINE</h1></div>

and css:

 #container { width: 50%; height: 50%; } #container h1 { font-size: XXXXXX; }

"XXXXXX" <- where I want the font size to be based on the width of the page / container.

QUESTION: Is it possible to have the font size h1 depending on the page width? in css3? I am sure that this can be done using JS, but how to avoid this if possible.

+6

css css3 font-size

circusdei Jan 26 '12 at 16:18

source share

5 answers

Another option, depending on your layout, is to use vw units:

vw: 1 / 100th of the width of the viewport. ( MDN source )

If your #container width #container set as a percentage of the viewport, the font size will correspond to its width:

Demo

CSS:

 #container h1 { font-size: 5vw; }

Browser support for vw units is IE9 +, see canIuse for more information.

+4

web-tiki Jul 19 '14 at 9:02

source share

Not like you say. However, you can do the opposite. Let the page width depend on the font size if you declare the base font size in ems and then use the em values for your layout. Then the width will increase if you increase the size of the text.

+3

Nate b Jan 26 '12 at 16:21

source share

I do not understand why this cannot be done using multimedia tags. Depending on how much you wanted to do this, you can do something like this:

 @media only screen and (min-width: 1000px){ #container h1 { font-size:42px; } } @media only screen and (max-width: 1000px){ #container h1 { font-size:40px; } } @media only screen and (max-width: 900px){ #container h1 { font-size:35px; } } @media only screen and (max-width: 800px){ #container h1 { font-size:30px; } } @media only screen and (max-width: 700px){ #container h1 { font-size:25px; } } @media only screen and (max-width: 600px){ #container h1 { font-size:20px; } } @media only screen and (max-width: 500px){ #container h1 { font-size:15px; } }

See JSFiddle here for a demo for more details.

+2

adamdport Mar 10 '14 at 14:34

source share

My solution creates a CSS variable expressing the height of the container relative to the viewport, in units of "vh" this variable can then be used with the "calc" CSS3 function to calculate the font height as a percentage of the height of the container.

the size of the container is measured each time the size of the viewport (window)

 <html> <head> <style> .container { width:100%; /* any rules you like to set the dimensions of the container */ top:40px; height:30vh; border:1px solid red; white-space:nowrap; } </style> <script> function setCSSVariableAccordingToElementHeightRelativeToViewPort(elementClassName, cssVariableName, immutableElement) { var element /* the "immutableElement" parameter is true when the container is never recreated, false if its generated dynamicaly */ if(immutableElement === true) { element = document.querySelector("." + elementClassName) } var onResize = function() { if(immutableElement !== true) { element = document.querySelector("." + elementClassName) } if(element != undefined) { var elementHeight = element.offsetHeight var elementVH = (elementHeight / window.innerHeight) * 100 element.style.setProperty(cssVariableName, elementVH + "vh") } } onResize() window.onresize = onResize } </script> </head> <body> <div class="container"> <span style="font-size:calc(var(--container-vh) * 0.25)">25%</span> <span style="font-size:calc(var(--container-vh) * 0.50)">50%</span> <span style="font-size:calc(var(--container-vh) * 1.00)">100%</span> </div> </body> <script> setCSSVariableAccordingToElementHeightRelativeToViewPort("container", "--container-vh", true) </script> </html>