Styled-componets - 미디어 쿼리

미디어쿼리

반응형 웹 페이지를 만들기위해 필요한 미디어 쿼리!!
브레이크 포인트를 설정해 뷰포트의 X값에 따라 스타일을 변경할 수 있습니다.

기존 css에도 포함되어있고 sass에도 지원을합니다.
아래 예시는 styled-components에서 사용하는 방법입니다.

/* mediaQuery.tsx */

type BreakPointType = 'pc' | 'tablet' | 'phone';

export const breakpoints: Record<BreakPointType, number> = {
  pc: 1279,
  tablet: 767,
  phone: 375,
};

export const MediaQuery = {
  FROM_PC_TO_TABLET: `@media (max-width: ${breakpoints.pc}px)`,
  FROM_TABLET_TO_PHONE: `@media (max-width: ${breakpoints.tablet}px)`,
};

사용방법

미디어쿼리 사용방법 Styled component 내에서 호출

import styled from 'styled-components';
import { MediaQuery } from '../style/mediaQuery';

const Container = styled.article`
   display: none

   ${MediaQuery.FROM_PC_TO_TABLET} {
      display: block;
      font-size:16px;
    }

   ${MediaQuery.FROM_PC_TO_TABLET} {
      font-size:10px;
    }
`;