Font size relative to the user's screen resolution?

css measurement
barakuda28 picture barakuda28 · Aug 2, 2012 · Viewed 190k times · Source

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

Miljan Puzović picture Miljan Puzović · Aug 2, 2012

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.

Related questions

rem px in Javascript

I use this code in JS: bigPhoto.setAttribute("width", "200rem"); The result is in pixel in html source, But: When I change it to 20rem the photo become really small. I couldn't solve the problem which is mentioned in the …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More