Last active
February 21, 2017 10:17
-
-
Save AllThingsSmitty/ca2b5f00b430c1926c4cea90c57f7ff7 to your computer and use it in GitHub Desktop.
Use :root for flexible type
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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; | |
| } |
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.
Can you show a demo link it will be batter for understand .. 👍
@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
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?