rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +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. Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
{% highlight scss %} {% 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 // No media query since this is the default in Bootstrap
// Small devices (landscape phones, 34em and up) // Small devices (landscape phones, 544px and up)
@media (min-width: 34em) { ... } @media (min-width: 544px) { ... }
// Medium devices (tablets, 48em and up) // Medium devices (tablets, 768px and up)
@media (min-width: 48em) { ... } @media (min-width: 768px) { ... }
// Large devices (desktops, 62em and up) // Large devices (desktops, 992px and up)
@media (min-width: 62em) { ... } @media (min-width: 992px) { ... }
// Extra large devices (large desktops, 75em and up) // Extra large devices (large desktops, 1200px and up)
@media (min-width: 75em) { ... } @media (min-width: 1200px) { ... }
{% endhighlight %} {% endhighlight %}
Since we write our source CSS in Sass, all our media queries are available via Sass mixins: 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*): We occasionally use media queries that go in the other direction (the given screen size *or smaller*):
{% highlight scss %} {% highlight scss %}
// Extra small devices (portrait phones, less than 34em) // Extra small devices (portrait phones, less than 544px)
@media (max-width: 33.9em) { ... } @media (max-width: 543px) { ... }
// Small devices (landscape phones, less than 48em) // Small devices (landscape phones, less than 768px)
@media (max-width: 47.9em) { ... } @media (max-width: 767px) { ... }
// Medium devices (tablets, less than 62em) // Medium devices (tablets, less than 992px)
@media (max-width: 61.9em) { ... } @media (max-width: 991px) { ... }
// Large devices (desktops, less than 75em) // Large devices (desktops, less than 1200px)
@media (max-width: 74.9em) { ... } @media (max-width: 1199px) { ... }
// Extra large devices (large desktops) // Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width // 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(sm) { ... }
@include media-breakpoint-down(md) { ... } @include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... } @include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
{% endhighlight %} {% endhighlight %}