Skip to content

Instantly share code, notes, and snippets.

@justingreenberg

justingreenberg/styled-media-queries.js

Last active June 17, 2018 16:26
Show Gist options
  • Save justingreenberg/e21075a6a623c26a194dcaf4ecdba64a to your computer and use it in GitHub Desktop.
Save justingreenberg/e21075a6a623c26a194dcaf4ecdba64a to your computer and use it in GitHub Desktop.
Download ZIP
Media queries for styled-components
Raw
styled-media-queries.js
const sizes = {
giant: 1170,
desktop: 992,
tablet: 768,
phablet: 572,
phone: 376
}
export const media = Object.keys(sizes).reduce((accumulator, label) => {
accumulator[label] = (...args) => css`
@media (max-width: ${sizes[label]}px) {
${css(...args)}
}
`
return accumulator
}, {})
const Container = styled.div`
color: #333;
${media.desktop`padding: 0 18px;`}
${media.tablet`padding: 0 18px;`}
${media.phablet`padding: 0 10px;`}
${media.phone`padding: 0 3px;`}
`
@dougajmcdonald
Copy link

I've seen this approach used before but curious why the max-width of say 992 for desktop? anything wider than 993px is not going to pickup those styles titled desktop. Am I missing something here? should is be min-width?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment