add responsive typography note /cc #17095
This commit is contained in:
parent
37c84f144b
commit
818e1243cf
|
@ -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>
|
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
|
||||||
</dl>
|
</dl>
|
||||||
{% endexample %}
|
{% 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 %}
|
||||||
|
|
Loading…
Reference in New Issue