kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

add responsive typography note /cc #17095

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

30
docs/content/typography.md
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> <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 %}