add responsive typography note /cc #17095

This commit is contained in:
Mark Otto 2015-08-22 18:56:28 -07:00
parent 37c84f144b
commit 818e1243cf
1 changed files with 30 additions and 0 deletions

View File

@ -235,3 +235,33 @@ Align terms and descriptions horizontally by using our grid system's predefined
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
{% endexample %}
## Responsive typography
*Responsive typography* refers to scaling text and components by simply adjusting the root element's `font-size` within a series of media queries. Bootstrap doesn't do this for you, but it's fairly easy to add if you need it.
Here's an example of it in practice. Choose whatever `font-size`s and media queries you wish.
{% highlight scss %}
html {
font-size: 14px;
}
@include media-breakpoint-up(sm) {
html {
font-size: 16px;
}
}
@include media-breakpoint-up(md) {
html {
font-size: 28px;
}
}
@include media-breakpoint-up(lg) {
html {
font-size: 20px;
}
}
{% endhighlight %}