font-size<\/code> property on elements based on the dimensions of the browser viewport.\n\n<\/p>\n\n\n\nIt\u2019s compatible with Sass, Less, Stylus and PostCSS, so it plugs into just about any stack. You can compile Bootstrap 4 with it too simply by changing $enable-responsive-font-sizes<\/code> to true<\/code> (see below). In BS5 this will be enabled by default. See this<\/a> CSS Tricks article. <\/p>\n\n\n\nHow does it work?<\/h3>\n\n\n\n![\"\"](\"https:\/\/css-tricks.com\/wp-content\/uploads\/2019\/03\/s_982851817502A5ABFAC6BAAFF4F17790218BE0B0FED31AD02B612E9B56244442_1551909001834_rfs-graph2.svg\")
<\/figure>\n\n\n\n\n\n\n\nLet’s focus on the black line. As you can see it is the biggest font size of the bunch with a maximum of 60px and a minimum of around 24px. Notice also that it will always be slightly bigger than the other font sizes even on a very small screen. <\/p>\n\n\n\n
Including a font-size is simple:<\/strong><\/p>\n\n\n\n.scss<\/code> syntax:<\/p>\n\n\n\n![\"\"](\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2019\/07\/image-14.png\")
<\/figure>\n\n\n\nThe value you pass to the mixin is the maximum<\/em> size of the element which. The maximum size will be applied when the viewport is 1200px is wider.<\/p>\n\n\n\nThe Generated CSS:<\/strong><\/p>\n\n\n\n![\"\"](\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2019\/07\/image-15.png\")
<\/figure>\n\n\n\nIf you are interested in how it works: it’s just a bit of math<\/a> <\/p>\n\n\n\nGood to know<\/h3>\n\n\n\n- <\/a>RFS only applies <\/strong>to font sizes above the base font size <\/strong>($rfs-base-font-size in scss\/sass) which is 1.25rem (20px in most browser configurations) out of the box. Everything below that size (e.g. normal body text) will not be managed by RFS. <\/li>
- The output font size<\/strong> will be rendered in rem<\/strong>. You can change it to
px<\/code> (see configuration<\/em> on Github) but it will disable the ability for users to change the the font size in their browser. <\/li><\/ul>\n\n\n\nConfiguration<\/h3>\n\n\n\n
RFS works out of the box without any configuration tweaks, but if you feel the urge to go loco and fine tune the way font sizes are rescaled, you can.
The most important settings:<\/strong><\/p>\n\n\n\nBase font size (unit in px<\/code> or rem<\/code>)<\/sup><\/sub><\/h4>\n\n\n\nSCSS, Sass & Stylus: $rfs-base-font-size<\/code><\/p>\n\n\n\nThe option will prevent the font size from becoming too small on \nsmaller screens. If the font size which is passed to RFS is smaller than\n this base font size, no fluid font rescaling will take place.<\/p>\n\n\n\n
Default value: 1.25rem<\/code><\/em><\/p>\n\n\n\nBreakpoint (in px<\/code>, em<\/code> or rem<\/code>)<\/sup><\/sub><\/h4>\n\n\n\nSCSS, Sass & Stylus: $rfs-breakpoint<\/code><\/p>\n\n\n\nAbove this breakpoint, the font size will be equal to the font size you passed to RFS; below the breakpoint, the font size will dynamically scale.<\/p>\n\n\n\n
Default value: 1200px<\/code><\/em><\/p>\n\n\n\nFactor (number)<\/sup><\/sub><\/h3>\n\n\n\nSCSS, Sass & Stylus: $rfs-factor<\/code><\/p>\n\n\n\nThis value determines the strength of font size resizing. The higher \nthe factor, the less difference there is between font sizes on small \nscreens. The lower the factor, the less influence RFS has, which results\n in bigger font sizes for small screens. The factor must me greater than\n 1.<\/p>\n\n\n\n
Default value: 10<\/code><\/em><\/p>\n\n\n\nClass (boolean)<\/sup><\/sub><\/h3>\n\n\n\nSCSS, Sass & Stylus: $rfs-class<\/code><\/p>\n\n\n\nRFS can be enabled or disabled with a class. There are 3 options:<\/p>\n\n\n\n
false<\/code>\nNo extra classes are generated.<\/li>disable<\/code>\nWhen the the disable classes are generated you can add the .disable-responsive-font-size<\/code> class to an element to disable responsive font sizes for the element and its child elements.<\/li>enable<\/code>\nRFS is disabled by default in this case. The .enable-responsive-font-size<\/code> class can be added to an element to enable responsive font sizes for the element and its child elements.<\/li><\/ul>\n\n\n\nDefault value: false<\/code><\/em><\/p>\n\n\n\nSafari iframe resize bug fix (boolean)<\/sup><\/sub><\/h4>\n\n\n\nSCSS, Sass & Stylus: $rfs-safari-iframe-resize-bug-fix<\/code><\/p>\n\n\n\nSafari doesn’t resize its font size in an iframe if the iframe is resized. To fix this min-width: 0vw<\/code> can be added and that’s what happens if this option is enabled. See #14<\/a>.<\/p>\n\n\n\nDefault value: false<\/code><\/em><\/p>\n\n\n\n!important usage<\/h4>\n\n\n\n
By setting a second parameter to true, !important<\/code> is added after the font-size value. (Example is in scss<\/code>)<\/p>\n\n\n\n.label {\n @include responsive-font-size(2.5rem, true);\n}<\/pre>\n\n\n\nCSS:<\/p>\n\n\n\n
.label {\n font-size: 2.5rem !important;\n}\n\n@media (max-width: 1200px) {\n .label {\n font-size: calc(1.375rem + 1.5vw) !important;\n }\n}<\/pre>\n\n\n\nBest practices<\/h3>\n\n\n\n- Don’t set RFS on the
html<\/code> element, because this influences the value of rem<\/code> and could lead to unexpected results.<\/li>- Always set your line-heights relative (in
em<\/code> or unitless) to prevent interline issues.<\/li><\/ul>\n\n\n\nInstallation<\/h3>\n\n\n\n
RFS can be installed using a package manager (recommended):<\/p>\n\n\n\n
- npm:
npm install rfs<\/code><\/li>- yarn:
yarn add rfs<\/code><\/li>- bower (deprecated):
bower install rfs --save<\/code><\/li><\/ul>\n\n\n\nIf you’re using Webpack, you can simplify the @import<\/code> using the ~<\/code> prefix:<\/p>\n\n\n\n@import \"~rfs\/scss\";<\/code><\/pre>\n\n\n\nResponsive font sizes in Bootstrap 4<\/strong><\/h3>\n\n\n\nBootstrap v4.3 ships with the option to enable responsive font sizes,\n allowing text to scale more naturally across device and viewport sizes.\n RFS<\/abbr> can be enabled by changing the $enable-responsive-font-sizes<\/code> Sass variable to true<\/code> and recompiling Bootstrap.<\/p>\n\n\n\nTo support RFS<\/abbr>, we use a Sass mixin to replace our normal font-size<\/code> properties. Responsive font sizes will be compiled into calc()<\/code> functions with a mix of rem<\/code> and viewport units to enable the responsive scaling behavior. More about RFS<\/abbr> and its configuration can be found on its GitHub repository<\/a>.<\/p>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
Just found out about RFS and it sounds really handy. Responsive Font Size (RFS) is an engine that automatically calculates and updates the font-size property on elements based on the dimensions of the browser viewport. It\u2019s compatible with Sass, Less, Stylus and PostCSS, so it plugs into just about any stack. You can compile Bootstrap […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/11399"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=11399"}],"version-history":[{"count":3,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/11399\/revisions"}],"predecessor-version":[{"id":11411,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/11399\/revisions\/11411"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=11399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=11399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=11399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}