| 1 |
/** |
| 2 |
* Breakpoints & Media Queries |
| 3 |
*/ |
| 4 |
|
| 5 |
// Most used breakpoints |
| 6 |
$break-huge: 1440px; |
| 7 |
$break-wide: 1280px; |
| 8 |
$break-xlarge: 1080px; |
| 9 |
$break-large: 960px; // admin sidebar auto folds |
| 10 |
$break-medium: 782px; // adminbar goes big |
| 11 |
$break-small: 600px; |
| 12 |
$break-mobile: 480px; |
| 13 |
$break-zoomed-in: 280px; |
| 14 |
|
| 15 |
// All media queries currently in WordPress: |
| 16 |
// |
| 17 |
// min-width: 2000px |
| 18 |
// min-width: 1680px |
| 19 |
// min-width: 1250px |
| 20 |
// max-width: 1120px * |
| 21 |
// max-width: 1000px |
| 22 |
// min-width: 769px and max-width: 1000px |
| 23 |
// max-width: 960px * |
| 24 |
// max-width: 900px |
| 25 |
// max-width: 850px |
| 26 |
// min-width: 800px and max-width: 1499px |
| 27 |
// max-width: 800px |
| 28 |
// max-width: 799px |
| 29 |
// max-width: 782px * |
| 30 |
// max-width: 768px |
| 31 |
// max-width: 640px * |
| 32 |
// max-width: 600px * |
| 33 |
// max-width: 520px |
| 34 |
// max-width: 500px |
| 35 |
// max-width: 480px * |
| 36 |
// max-width: 400px * |
| 37 |
// max-width: 380px |
| 38 |
// max-width: 320px * |
| 39 |
// |
| 40 |
// Those marked * seem to be more commonly used than the others. |
| 41 |
// Let's try and use as few of these as possible, and be mindful about adding new ones, so we don't make the situation worse |
| 42 |
|
