Menu
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?
751
Note that using clamp() for font sizes, as in these examples, allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size. It has the same effect as the code in Fluid Typography but in one line, and without the use of media queries.
First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%).
To make font size responsive in steps, set the base font size at each breakpoint. To create fluid text that smoothly changes size, use the calc() function to calculate a ratio between pixels and viewport widths, this will make the base font size grow at the correct rate relative to the screen width.
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
52
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
