diff options
author | Martijn Cuppens <martijn.cuppens@gmail.com> | 2019-02-23 00:03:56 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2019-02-23 00:03:56 +0300 |
commit | d5073a1d2c71c2cd15b4b5787e2c58a6db2f0d55 (patch) | |
tree | e3b5e64e7f2b493f1116329bb86c211ec31b3d79 | |
parent | 1ab8877e6a6b3497fa3e6d375d02ba39c167fd42 (diff) |
Graph explanation (#103)
-rw-r--r-- | README.md | 10 |
1 files changed, 10 insertions, 0 deletions
@@ -189,6 +189,16 @@ If you wonder how the font sizes are rescaled, wonder no more and stare at this ![RFS visualisation](https://i.imgur.com/P2ixaKH.png) +Each color represents another font size being rescaled. For example: + +```scss +.title { + @include font-size(40px); +} +``` + +This is the green line. A font size of `40px` stays `40px` in viewports with a size larger than `1200px`. Below `1200px`, the font size is rescaled and at viewport of `360px`, the font size is about `27px`. Note that every font size is generated in a combination of `rem` and `vw` units, but they are mapped to `px` in the graph to make it easier to understand. + ## Configuration |