import { css, CSSObject, FlattenSimpleInterpolation } from "styled-components"; interface Size { [key: string]: number; } interface MediaQueries { [key: string]: (style: TemplateStringsArray | CSSObject) => FlattenSimpleInterpolation; } const sizes: Size = { desktop: 1024, tablet: 768, phone: 320, phoneS: 319, }; export const mediaQueries: MediaQueries = Object.keys(sizes).reduce((acc, label) => { acc[label as keyof Size] = (style: TemplateStringsArray | CSSObject) => css` @media (max-width: ${sizes[label as keyof Size]}px) { ${css(style)}; } `; return acc; }, {} as MediaQueries);
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter