Using a mixin makes media queries simple and easy.
The most common breakpoints are provided as named breakpoints.
You can override the default widths in your config file.
- mercury: 1600px - widescreen
- venus: 1600px - widescreen
- earth: 1400px - large laptop
- mars: 1200px - small laptop
- jupiter: 1024px - tablet landscape
- saturn: 768px - tablet portrait
- uranus: 667px - iphone6 landscape
- neptune: 568px - iphone5 landscape
- pluto: 375px - iphone6 portrait
- iphone6pLandscape: 736px - iphone6plus landscape
- iphone6pPortrait: 414px - iphone6plus portrait
- iphone5Portrait: 350px - iphone5 portrait
These breakpoints include the most common device widths.
You can use a named breakpoint or a custom breakpoint. If you choose to use a named breakpoint you should not include a modifier.
If you use a custom breakpoint you can specify a modifier. This should be 'min-width' or 'max-width'. If you do not include a modifier elr-breakpoint will use 'max-width' by default.
If you want to create complex media queries with the named breakpoints just use the keywords as variable names. eg. 'saturn' becomes $saturn.