If you want a cool transition on your font-size when the user resizes the browser this is how you might do it using Bootstrap3. If your using LESS with Bootstrap (if your not, you should be!) 😛 All you do is simply call the transition LESS mixin function with your params, adjust the seconds.
|
1 2 3 |
.transition(font-size .15s linear); |
So for responsive heading h1 you could do the following.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
// RESPONSIVE TYPOGRAPHY /* ONLY Small devices (768px and down) */ @media (max-width: @screen-sm-max) { } /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { h1.page-title { font-size: 60px; font-weight: 900; line-height: 1em; .transition(font-size .15s linear); } } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { h1.page-title { font-size: 90px; } } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { } |