Change font size with RFS
1 min readSep 21, 2020
When we use Bootstrap and develop the responsive design, we always change the font size. RFS(https://github.com/twbs/rfs) is suitable for it. This article’s case is Ruby on Rails.
How to use
First, installing…
- npm:
npm install rfs - yarn:
yarn add rfs - bower (deprecated):
bower install rfs --save
Next, importing the rfs file into application.scss.
# application.scss@import "../../../node_modules/rfs/scss";
Then, adding “viewport” into application.html.erb.
#application.html.erb<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<head>
Last, making a custom scss file.
# stylesheets/shared/custom.scss
@import "../../../../node_modules/rfs/scss";@media (max-width: 559px){ h1, .h1 { @include font-size(3rem); } h2, .h2 { @include font-size(2.1rem); } h3, .h3 { @include font-size(1.8rem); } h4, .h4 { @include font-size(1.1rem); } h5, .h5 { @include font-size(1.1rem); } small, .small { @include font-size(0.8rem); }}
You are able to use customized css classes.
