DEV Community

Short syntax mediaquery utility?

Vesa Piittinen on December 12, 2019

There are various custom mediaquery syntaxes out there within container/element queries libs having syntaxes like 100px <= width < 500px and ...
Read full post
Collapse
 
merri profile image
Vesa Piittinen •

Okay, there hasn't been much activity here, but here is something I made last night.

You can write:

'width: >=500px <1000px'
-> '(min-width: 500px) and (max-width: 999px)'

And you can config it a lot so you can get something usable with Styled Components:

const breakpoints = { s: '360px', m: '480px', l: '640px', xl: '960px' }
// or: { s: 360, m: 480, l: 640, xl: 960 }
const screen = new compactMediaQuery({ breakpoints, prefix: '@media screen' })

screen('width: >=m <xl')
// '@media screen and (min-width: 480px) and (max-width: 959px)'

const Component = styled.div({
    [screen('width: >=m <xl')]: {
        // styles that work from M and above, but below XL
    }
})

This is just a thing I assumed would already be solved by someone, but so far breakpoint tools seem to mostly focus to doing traditional mobile-first where you have only min-width based queries, and if you have max-width then you have to write more code.