mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-25 21:09:06 +02:00
Code Issues Releases Wiki Activity

docs twerks

Browse Source
This commit is contained in:
Mark Otto
2015-08-08 14:57:12 -07:00
parent 66305c5b02
commit e592a23eb7
2 changed files with 9 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/layout/media-queries.md
View File

@@ -4,9 +4,9 @@ title: Media queries
group: layout
---
Since Bootstrap is designed to be mobile-first, we employ media queries in our CSS to create responsive pages and components.
Since Bootstrap is responsive and designed to be mobile-first, we employ media queries in our CSS to create responsive pages and components that scale to particular viewports and devices.
Media queries allow you to group rulesets by a handful of parameters, most notably viewport dimensions, to gracefully scale content across devices. Bootstrap mainly uses the following media query ranges in our source Sass files for key breakpoints in our layout, grid system, and components.
Media queries allow you to group rulesets by a handful of parameters, most notably viewport dimensions, to gracefully scale content across devices. Bootstrap primarily uses the following media query ranges—we call them breakpoints—in our source Sass files for our layout, grid system, and components.
{% highlight scss %}
/* Extra small devices (portrait phones, less than ???px) */
@@ -25,7 +25,8 @@ Media queries allow you to group rulesets by a handful of parameters, most notab
@media (min-width: 75em) { ... }
{% endhighlight %}
These media queries are available via Sass mixins:
Since we write our source CSS in Sass, all our media queries are available via Sass mixins:
{% highlight scss %}
@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@@ -42,6 +43,7 @@ These media queries are available via Sass mixins:
{% endhighlight %}
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) { ... }
@@ -59,7 +61,8 @@ We occasionally use media queries that go in the other direction (the given scre
/* No media query since the extra-large breakpoint has no upper bound on its width */
{% endhighlight %}
These media queries are available via Sass mixins:
Once again, these media queries are also available via Sass mixins:
{% highlight scss %}
@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }