Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Use :root for flexible type
/* This has been added to CSS Protips https://github.com/AllThingsSmitty/css-protips */
/* The type font size in a responsive layout should be able to adjust with each viewport.
You can calculate the font size based on the viewport height and width using :root */
:root {
font-size: calc(1vw + 1vh + .5vmin);
}
/* Now you can utilize the root em unit based on the value calculated by :root */
body {
font: 1em/1.6 sans-serif;
}
@trubblebruin

This comment has been minimized.

Copy link

trubblebruin commented May 4, 2016

How would you recommend using this? Finding where the font-size gets to the maximum you'd like it to be and setting a media query above that setting the font size to a hard unit rather than a fluid one?

@AllThingsSmitty

This comment has been minimized.

Copy link
Owner Author

AllThingsSmitty commented May 5, 2016

You could do that, but you can also avoid using a media query for the font-sizes across viewports and just allow the body class to use the rem value; text size will adjust based on the viewport size.

@ashikjs

This comment has been minimized.

Copy link

ashikjs commented Jun 1, 2016

Can you show a demo link it will be batter for understand .. 👍

@AllThingsSmitty

This comment has been minimized.

Copy link
Owner Author

AllThingsSmitty commented Nov 2, 2016

@ashikjs I totally forgot to post the link to a demo I did months back. Here it is.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.