html - How to implement fluid font size using pure CSS

Question

I have text wrapped in <div>s, and would like to make the whole thing fluid including the font-size of the text, i.e. the text resizes itself in response to the size of the containing element.

I came across a Javasript + CSS solution, but just wondering if it is possible to do so with pure CSS?

Answer 1

While Jim has given you accurate information, it strays from the question asked slightly. Responsive design (@media queries) can alter the text according to screen size. From what I understand, you were asking if there is a pure CSS solution for fluid text size (continual resizing of text during window size changes).

Here is a link to css-tricks explanation of new font sizing techniques. Please be aware this is new and older browsers will most likely have some issues, and that even newer ones (Chrome + Safari) are still not bug-free.

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

Edit- added code

Answer 2

Yes, look at CSS 3 media queries. You can provide different style rules depending on the viewport width. This includes altering the font size.

Answer 3

Short Answer

You can't have fluid font sizes, but you will when viewport-percentage lengths are widely available.

Long Answer

You have to understand these two terms: responsive and fluid.

Responsive means you make your stylesheet respond differently to different window sizes. This is done by using CSS Media Queries. While responsive is one of the hippest words in web design, it mostly means hardcoding CSS for different absolute lengths until you drop dead of boredom.

Fluid means you work with relative length units such as percentages. When you work with relative length units, every size is calculated automagically.

Example

Let's say you have a <div> inside the document body and you want it to fill half of the window.

The responsive solution is this:

@media (max-width: 1px) {
  body > div {
    width: 0.5px;
  }
}

@media (max-width: 2px) {
  body > div {
    width: 1px;
  }
}

@media (max-width: 3px) {
  body > div {
    width: 1.5px;
  }
}

@media (max-width: 4px) {
  body > div {
    width: 2px;
  }
}

/* Repeat until you reach gigabytes and hit operating systems' file size limitations. */

And the fluid solution:

body > div {
  width: 50%;
}

So?

What limits us today is that there is no wide support for viewport-relative length units. What you can do is drop the whole idea of "pure CSS fluid font sizes" and go responsive.

Answer 4

use calc with media query for a responsive and fluid font

@media screen and (min-width: 25em){
  div {  
    font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) );
  }
}