primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-05 21:22:57 +03:00
Code Issues Projects Releases Wiki Activity

Shorten visual

Browse Source
This commit is contained in:
simurai 2020-02-19 17:54:30 +09:00 committed by GitHub
parent 6dcf1f01db
commit 1ba777cc6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/content/support/breakpoints.md
View File

@ -34,13 +34,17 @@ In most cases, breakpoints get used with the `min-width` media query. This means
A responsive utility class stays enabled **unless** it gets overridden with another responsive utility class that has a higher breakpoint. Here the example from above `<div class="col-12 col-md-8 col-xl-4">...</div>` visualized:
```
| 0px ->
| sm 544px ->
| md 768px ->
| lg 1012px ->
| xl 1280px ->
| 0px ->
| 544px ->
| sm
| 768px ->
| md
| 1012px ->
| lg
| 1280px ->
| xl
| col-12 ------------> | col-md-8 ----------------> | col-xl-4 ->
| col-12 ---------> | col-md-8 ----------> | col-xl-4 ->
```
Using breakpoints with the `min-width` media query works great for "mobile first". Design for mobile devices as a default, then if needed, tweak it for wider desktop screens using responsive utility classes.