├── LICENSE ├── README.md └── responsive-font-size.scss /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Wadim Grasza 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | responsive-font-size 2 | ==================== 3 | 4 | A SASS mixin to ease creating layouts which scale the font-size based on screen width. Relies on media queries. 5 | 6 | Supplied with four parameters, this mixin will intelligently figure out the right media-query definitions to make the font scale fluently with screen width without you having to calculate the thresholds and sizes yourself. 7 | 8 | Usage: 9 | 10 | @import "responsive-font-size"; 11 | 12 | p { 13 | @include responsive-font-size (1.8em, 3.7em, 640px, 1200px, 0.3em); 14 | } 15 | 16 | or (if you're in the mood to be explicit): 17 | 18 | p { 19 | @include responsive-font-size ( 20 | $min-font-size: 1.8em, 21 | $max-font-size: 3.7em, 22 | $min-screen-width: 640px, 23 | $max-screen-width: 1200px, 24 | $font-size-step: 0.3em /* optional, default: 0.1em */ 25 | ); 26 | } 27 | 28 | 29 | It basically says: 30 | 31 | - for screen width smaller than 640px I want the font-size to be 1.8em 32 | - for screen width greater than 1200px I want it to be 3.7em 33 | - scale the font appropriately in between 34 | - don't bother changing the font size by less than 0.3em (optional, default: 0.1em) 35 | 36 | The SASS code above will be compiled to the following CSS: 37 | 38 | p { font-size: 3.7em; } 39 | @media all and (max-width: 640px) { p { font-size: 1.8em; } } 40 | 41 | @media all and (max-width: 1200px) { p { font-size: 3.7em; } } 42 | @media all and (max-width: 1103px) { p { font-size: 3.34917em; } } 43 | @media all and (max-width: 1004px) { p { font-size: 3.0005em; } } 44 | @media all and (max-width: 904px) { p { font-size: 2.65792em; } } 45 | @media all and (max-width: 802px) { p { font-size: 2.31846em; } } 46 | @media all and (max-width: 698px) { p { font-size: 1.9827em; } } 47 | 48 | Decrease $font-size-step to achieve greater fluency. 49 | -------------------------------------------------------------------------------- /responsive-font-size.scss: -------------------------------------------------------------------------------- 1 | @mixin responsive-font-size($min-font-size, $max-font-size, $min-screen-width, $max-screen-width, $font-size-step: 0.1em) { 2 | 3 | font-size: $max-font-size; 4 | @media all and (max-width: $min-screen-width) { 5 | font-size: $min-font-size; 6 | } 7 | 8 | @if $font-size-step <= 0 { 9 | @warn "parameter to responsive-font-size: font-size-step must be greater than 0"; 10 | } 11 | @else { 12 | $min-scale-factor: $min-font-size / $min-screen-width / 1em * 1px; 13 | $max-scale-factor: $max-font-size / $max-screen-width / 1em * 1px; 14 | 15 | $screen-width: round($max-screen-width); 16 | $font-size: $max-font-size; 17 | 18 | @while $screen-width >= $min-screen-width { 19 | 20 | $progress: ($screen-width - $min-screen-width) / ($max-screen-width - $min-screen-width); 21 | $scale-factor: $min-scale-factor + $progress * ($max-scale-factor - $min-scale-factor); 22 | 23 | $font-size: $screen-width * $scale-factor / 1px * 1em; 24 | 25 | @media all and (max-width: $screen-width) { 26 | font-size: $font-size; 27 | } 28 | 29 | $screen-width-step: $font-size-step / $scale-factor / 1em * 1px; 30 | @if $screen-width-step < 1px { 31 | $screen-width-step: 1px; 32 | } 33 | 34 | $screen-width: round($screen-width - $screen-width-step); 35 | } 36 | } 37 | } 38 | --------------------------------------------------------------------------------