Media Queries (Breakpoints)
Media queries are used to apply different styles to a document depending on the size of the screen.
Media queries are defined in the @media rule. The @media rule is used inside a style sheet to apply
different styles for different media types/devices.
More information about media queries can be found on MDN.
In Monster we use the following media queries:
| Class | From | To |
|---|---|---|
viewport0 | 0 | 480px |
viewport-4 | 0 | 480px |
viewport-7 | 0 | 768px |
viewport-9 | 0 | 992px |
viewport-12 | 0 | 1200px |
viewport4 | 480px | ∞ |
viewport7 | 768px | ∞ |
viewport9 | 992px | ∞ |
viewport12 | 1200px | ∞ |
viewport4-7 | 480px | 768px |
viewport7-9 | 768px | 992px |
viewport9-12 | 992px | 1200px |
In the following graphic you can see the different media queries and the corresponding mixins.
