styled-components用にPC・Moblieを出し分けるメディアクエリを書き出すためのスクリプトをつくる 📱

メディアクエリでパソコンとスマホのデザインを出し分ける際、ブレイクポイントを一括で編集できるようにスクリプトを使って書き出すようにしています。

mediaQuery.ts

const mobileMaxWidth = 768;

export function isPc(width: number) {
  return mobileMaxWidth < width;
}

export function isMobile(width: number) {
  return width <= mobileMaxWidth;
}

export function cssPc(style: string) {
  return `
    @media(min-width: ${ mobileMaxWidth + 1 }px) {
      ${ style }
    }
  `;
}

export function cssMobile(style: string) {
  return `
    @media(max-width: ${ mobileMaxWidth }px) {
      ${ style }
    }
  `;
}

こんな感じです。
ちなみに768pxはiPadの横幅です。
あくまで画面幅でのレイアウトですが、iPadまではスマホ用のレイアウトで組みたい時に使っています。

使い方

const PcOrMobile = styled.div`
  &:before {
    content: 'ScreenSize: ';
  }

  ${cssPc(`
    &:after {
      content: 'PC';
    }
  `)}

  ${cssMobile(`
    &:after {
      content: 'Mobile';
    }
  `)}
}