rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Responsive breakpoints from em to px

Browse Source 
Should close https://github.com/twbs/bootstrap/issues/18503
This commit is contained in:
Bass Jobsen 2015-12-09 21:26:38 +01:00
parent 2f257445c3
commit 4c5ba3e5dc
1 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
docs/layout/overview.md
View File

@ -51,20 +51,20 @@ Since Bootstrap is developed to be mobile first, we use a handful of [media quer
Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
{% highlight scss %}
// Extra small devices (portrait phones, less than 34em)
// Extra small devices (portrait phones, less than 544px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }
// Small devices (landscape phones, 544px and up)
@media (min-width: 544px) { ... }
// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
{% endhighlight %}
Since we write our source CSS in Sass, all our media queries are available via Sass mixins:
@ -87,17 +87,17 @@ Since we write our source CSS in Sass, all our media queries are available via S
We occasionally use media queries that go in the other direction (the given screen size *or smaller*):
{% highlight scss %}
// Extra small devices (portrait phones, less than 34em)
@media (max-width: 33.9em) { ... }
// Extra small devices (portrait phones, less than 544px)
@media (max-width: 543px) { ... }
// Small devices (landscape phones, less than 48em)
@media (max-width: 47.9em) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... }
// Medium devices (tablets, less than 62em)
@media (max-width: 61.9em) { ... }
// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }
// Large devices (desktops, less than 75em)
@media (max-width: 74.9em) { ... }
// Large devices (desktops, less than 1200px)
@media (max-width: 1199px) { ... }
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
@ -110,5 +110,4 @@ Once again, these media queries are also available via Sass mixins:
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
{% endhighlight %}