Breakpoints
We use the following breakpoints ranges. Breakpoints values represent lowest point of the range
and should be used only with min-width
property.
Breakpoint | Index | Alias | Purpose |
---|---|---|---|
(default) | 0 | - | Mobile (portrait) |
30rem (480px) | 1 | small | Mobile (landscape) |
48rem (768px) | 2 | medium | Tablet (portrait) |
62rem (992px) | 3 | large | Tablet (landscape) |
75rem (1200px) | 4 | xlarge | Laptops (and Desktops) |
For example, using a margin=[1, 2, 3]
creates styles with multiple mobile-first min-width media queries.
<Text m={[1, 2, 3]}>Sample text</Text>
.Text-hash {margin: 0.5rem;}@media screen and (min-width: 30rem) {.Text-hash {margin: 1rem;}}@media screen and (min-width: 48rem) {.Text-hash {margin: 1.5rem;}}
Media Queries
For convenience and for use with other styling approaches, you can import the media queries derived from the breakpoints scale.
const MediaQueries = {small: `@media screen and (min-width: ${Breakpoints[0]})`,medium: `@media screen and (min-width: ${Breakpoints[1]})`,large: `@media screen and (min-width: ${Breakpoints[2]})`,xlarge: `@media screen and (min-width: ${Breakpoints[3]})`};
import { MediaQueries } from '@freenow/wave';const Container = styled.div`${MediaQueries.small} {width: 2rem;}`;
Examples
Sample text