Created
July 25, 2012 13:02
-
-
Save danscotton/3176063 to your computer and use it in GitHub Desktop.
major vs minor breakpoints
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ----- | |
| MAJOR | |
| ----- | |
| These are what I refer to as 'major' breakpoints. They're defined on our link tags, and are on the 'outside'. | |
| All of our stylesheets are conditionally inserted (based off window innerWidth/innerHeight) into the page dynamically using javascript. | |
| <head> | |
| ... | |
| <link rel="stylesheet" type="text/css" href="compact.css" media="(max-width: 640px)" /> | |
| <link rel="stylesheet" type="text/css" href="tablet.css" media="(min-width: 641px)" /> | |
| <link rel="stylesheet" type="text/css" href="wide.css" media="(min-width: 1056px)" /> | |
| ... | |
| </head> | |
| ----- | |
| MINOR | |
| ----- | |
| These are what I would call 'minor' breakpoints, and are on the 'inside' of our stylesheets. More specific and used on a | |
| content-by-content basis. | |
| // compact.css (which is max-width: 640px) | |
| @import component-one.css | |
| @import component-two.css | |
| // component-one.css | |
| @media (min-width: 480px) { | |
| // rules specifically for component-one > 480 | |
| } | |
| // component-two.css | |
| @media (min-width: 480px) { | |
| // rules specifically for component-two > 480 | |
| } | |
| @media (min-width: 580px) { | |
| // rules specifically for component-two > 580 | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment