Created
May 9, 2012 22:15
-
-
Save abuisman/2649316 to your computer and use it in GitHub Desktop.
Mixin for responsive (relative) font-sizes depending on the screen size using media queries.
This file contains 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
| /* | |
| Mixin for responsive (relative) font-sizes depending on the screen size using media queries. | |
| This is width based, but you can easily adjust it for more complex, or simple, checking. | |
| Set the base as you max size, then I divided everything into tenths of the base. | |
| To use, simply include the mixin, passing it the font-size that you'd want to see at 100%. | |
| This should then scale nicely along in tenths. If you need more detail, just add more elements to the level list. | |
| Oh, and this requires SASS 3.2 (and higher?) | |
| See the compiled (debugged) code below. | |
| */ | |
| @mixin flexy-font($fontsize){ | |
| $base: 1200px; | |
| @media (min-width: $base){ | |
| font-size: $fontsize; | |
| } | |
| @each $factor in 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1 { | |
| @media (max-width: $base * $factor){ | |
| font-size: $fontsize * $factor; | |
| } | |
| } | |
| } | |
| /* Usage */ | |
| body{ | |
| @include flexy-font(20px); | |
| } | |
| h1{ | |
| @include flexy-font(40px); | |
| } |
This file contains 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
| /* Usage */ | |
| /* line 26, ../../app/assets/stylesheets/typography.css.scss */ | |
| @media (min-width: 1200px) { | |
| /* line 26, ../../app/assets/stylesheets/typography.css.scss */ | |
| body { | |
| font-size: 20px; | |
| } | |
| } | |
| @media (max-width: 1080px) { | |
| /* line 26, ../../app/assets/stylesheets/typography.css.scss */ | |
| body { | |
| font-size: 18px; | |
| } | |
| } | |
| @media (max-width: 960px) { | |
| /* line 26, ../../app/assets/stylesheets/typography.css.scss */ | |
| body { | |
| font-size: 16px; | |
| } | |
| } | |
| @media (max-width: 840px) { | |
| /* line 26, ../../app/assets/stylesheets/typography.css.scss */ | |
| body { | |
| font-size: 14px; | |
| } | |
| } | |
| @media (max-width: 720px) { | |
| /* line 26, ../../app/assets/stylesheets/typography.css.scss */ | |
| body { | |
| font-size: 12px; | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| /* line 26, ../../app/assets/stylesheets/typography.css.scss */ | |
| body { | |
| font-size: 10px; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| /* line 26, ../../app/assets/stylesheets/typography.css.scss */ | |
| body { | |
| font-size: 8px; | |
| } | |
| } | |
| @media (max-width: 360px) { | |
| /* line 26, ../../app/assets/stylesheets/typography.css.scss */ | |
| body { | |
| font-size: 6px; | |
| } | |
| } | |
| @media (max-width: 240px) { | |
| /* line 26, ../../app/assets/stylesheets/typography.css.scss */ | |
| body { | |
| font-size: 4px; | |
| } | |
| } | |
| @media (max-width: 120px) { | |
| /* line 26, ../../app/assets/stylesheets/typography.css.scss */ | |
| body { | |
| font-size: 2px; | |
| } | |
| } | |
| /* line 30, ../../app/assets/stylesheets/typography.css.scss */ | |
| @media (min-width: 1200px) { | |
| /* line 30, ../../app/assets/stylesheets/typography.css.scss */ | |
| h1 { | |
| font-size: 40px; | |
| } | |
| } | |
| @media (max-width: 1080px) { | |
| /* line 30, ../../app/assets/stylesheets/typography.css.scss */ | |
| h1 { | |
| font-size: 36px; | |
| } | |
| } | |
| @media (max-width: 960px) { | |
| /* line 30, ../../app/assets/stylesheets/typography.css.scss */ | |
| h1 { | |
| font-size: 32px; | |
| } | |
| } | |
| @media (max-width: 840px) { | |
| /* line 30, ../../app/assets/stylesheets/typography.css.scss */ | |
| h1 { | |
| font-size: 28px; | |
| } | |
| } | |
| @media (max-width: 720px) { | |
| /* line 30, ../../app/assets/stylesheets/typography.css.scss */ | |
| h1 { | |
| font-size: 24px; | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| /* line 30, ../../app/assets/stylesheets/typography.css.scss */ | |
| h1 { | |
| font-size: 20px; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| /* line 30, ../../app/assets/stylesheets/typography.css.scss */ | |
| h1 { | |
| font-size: 16px; | |
| } | |
| } | |
| @media (max-width: 360px) { | |
| /* line 30, ../../app/assets/stylesheets/typography.css.scss */ | |
| h1 { | |
| font-size: 12px; | |
| } | |
| } | |
| @media (max-width: 240px) { | |
| /* line 30, ../../app/assets/stylesheets/typography.css.scss */ | |
| h1 { | |
| font-size: 8px; | |
| } | |
| } | |
| @media (max-width: 120px) { | |
| /* line 30, ../../app/assets/stylesheets/typography.css.scss */ | |
| h1 { | |
| font-size: 4px; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment