A media query template in styled components
// media.js | |
import { css } from 'styled-components' | |
const sizes = { | |
// default styles written mobile-first assuming 320px width | |
mbl: 375, | |
tab: 700, | |
desk: 990, | |
deskL: 1200, | |
} | |
// Iterate through the sizes and create a media template | |
const media = Object.keys(sizes).reduce((acc, label) => { | |
acc[label] = (...args) => css` | |
@media (min-width: ${sizes[label] / 16}em) { | |
${css(...args)}; | |
} | |
` | |
return acc | |
}, {}) | |
export default media |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment