query
A utility function for composing an inline media query string in CSS.
Specification
The
query function is great for a shorthand declaration of inline media query in CSS. This function support the same call signature as the useResponsiveQuery hook, but unlike the mentioned hook it returns a plain media query string:1
query({ from: 'md' })
2
// (min-width: 768px)
Copied!
The main purpose of this utility function is to align your inline media queries declarations with the list of defined breakpoints in Atomic Layout, making those a source of truth for both React and non-react usage of responsive behavior.
Example
Exact breakpoint
1
import styled from 'styled-components'
2
import { query } from 'atomic-layout'
3
​
4
export const Example = styled.div`
5
font-size: 14px;
6
7
/* Targets the "lg" breakpoint only */
8
@media ${query({ for: 'lg' })} {
9
font-size: 16px;
10
}
11
`
Copied!
High-pass breakpoint range
To target a breakpoint range starting from a certain breakpoint use the
from property on query: 1
import styled from 'styled-components'
2
import { query } from 'atomic-layout'
3
​
4
export const Example = styled.div`
5
font-size: 14px;
6
7
/*
8
* Targets everything after the "md" breakpoint inclusive.
9
* Effectively: md, lg, xl.
10
*/
11
@media ${query({ from: 'md' })} {
12
font-size: 16px;
13
}
14
`
Copied!
Low-pass breakpoint range
1
import styled from 'styled-components'
2
import { query } from 'atomic-layout'
3
​
4
export const Example = styled.div`
5
font-size: 14px;
6
7
/*
8
* Targets everything before the "md" breakpoint exclusive.
9
* Effectively: xs, sm, md.
10
*/
11
@media ${query({ to: 'md' })} {
12
font-size: 16px;
13
}
14
`
Copied!
Bell breakpoint range
To create a range from one breakpoint to another use the
from and to properties:1
import styled from 'styled-components'
2
import { query } from 'atomic-layout'
3
​
4
export const Example = styled.div`
5
font-size: 14px;
6
7
/*
8
* Targets everything beween the "sm" breakpoint inclusive
9
* and the "lg" breakpoint exclusive.
10
* Effectively: sm, md.
11
*/
12
@media ${query({ from: 'sm', to: 'lg' })} {
13
font-size: 16px;
14
}
15
`
Copied!
Notch breakpoint range
1
import styled from 'styled-components'
2
import { query } from 'atomic-layout'
3
​
4
export const Example = styled.div`
5
font-size: 14px;
6
7
/*
8
* Targets everything except between the "sm" breakpoint inclusive
9
* and the "lg" breakpoint exclusive.
10
* Effectively: xs, lg, xl.
11
*/
12
@media ${query({ except: true, from: 'sm', to: 'lg' })} {
13
font-size: 16px;
14
}
15
`
Copied!
Using custom breakpoints
1
import styled from 'styled-components'
2
import { query } from 'atomic-layout'
3
​
4
export const Example = styled.div`
5
font-size: 14px;
6
7
/* Targets only a portrait device orientation */
8
@media ${query({ for: { orientation: 'portrait' } )} {
9
font-size: 16px;
10
}
11
`
Copied!
Last modified 2yr ago