Last active
December 16, 2015 00:19
-
-
Save aebsr/5346339 to your computer and use it in GitHub Desktop.
Adaptive font size Less mixin & px fallback
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
| .font-size(@font-size: 16, @mobile-ratio: 66) { | |
| @rem: (@font-size / 10); | |
| @percent: (@mobile-ratio / 100); | |
| font-size: (@font-size * 1px); | |
| font-size: ~"@{rem}rem"; | |
| @media @mobile { | |
| @rem: ((@font-size / 10) * @percent); | |
| font-size: (@font-size * 1px); | |
| font-size: ~"@{rem}rem"; | |
| } | |
| } |
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
| // Generated CSS | |
| html { | |
| font-size: .625em; | |
| } | |
| body { | |
| font-size: 18px; | |
| font-size: 1.8rem; | |
| } | |
| @media screen only (max-width: 600px) { | |
| body { | |
| font-size: 18px; | |
| font-size: 1.1880000000000002rem; | |
| } | |
| } |
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
| @import 'font-size'; | |
| @mobile: ~"screen only (max-width: 600px)"; | |
| html { | |
| font-size: .625em; | |
| } | |
| body { | |
| .font-size(18); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment