기기별 size

const deviceSizes = {
  mobile: '425',
  tablet: '768',
  laptop: '1024',
};

기기별 media 쿼리 적용

device: {
    mobile: (literals: TemplateStringsArray, ...args: string[]): CSSProp =>
      css`
        @media only screen and (max-width: ${deviceSizes.mobile}px) {
          ${css(literals, ...args)}
        }
      `,
    tablet: (literals: TemplateStringsArray, ...args: string[]): CSSProp =>
      css`
        @media only screen and (max-width: ${deviceSizes.tablet}px) {
          ${css(literals, ...args)}
        }
      `,
    laptop: (literals: TemplateStringsArray, ...args: string[]): CSSProp =>
      css`
        @media only screen and (max-width: ${deviceSizes.laptop}px) {
          ${css(literals, ...args)}
        }
      `,
}

설명 예시

@media only screen and (max-width: 425px) : 미디어 유형 화면을 대상으로 하며 425px 보다

작을 경우 해당 쿼리 적용