[Emotion] MediaQuery

Grace·2022년 5월 13일
3

Emotion

목록 보기
1/2
post-thumbnail

Emotion에서 미디어 쿼리를 사용하는 것은 일반 css에서 사용하는 것과 같습니다.

const Wrapper = styled.div`
  font-size: 100px;
  @media (min-width: 420px) {
    font-size: 50px;
  }
`;

재사용 가능한 미디어 쿼리

미디어 쿼리는 반응형 앱을 만드는 데 유용할 수 있지만 반복해서 작성해주면 각 스타일마다 다르게 적용될 수도 있고 비효율적입니다. 사용할 때마다 다시 작성하는 대신 상수로 옮겨 사용하고 싶을 때마다 참조할 수 있습니다.

const breakpoints = [576, 768, 992, 1200];
const mq = breakpoints.map((bp) => `@media (min-width: ${bp}px)`);

const Wrapper = styled.div`
  font-size: 100px;
  ${mq[0]} {
    font-size: 50px;
  }
`;

facepaint

상수로 미디어 쿼리를 정의하는 것이 매번 미디어 쿼리를 다시 작성하는 것보다 훨씬 쉽지만 일반적으로 다른 중단점에서 동일한 속성을 변경하려고 하기 때문에 여전히 문제가 있습니다. facepaint를 사용하여 미디어 쿼리에서 각 css 속성이 배열로 있어야 하는 것을 정의할 수 있게 하여 쉽게 사용할 수 있습니다..

단, 객체스타일 css에서만 사용할 수 있습니다.

yarn add facepaint
const mq = facepaint(breakpoints.map((bp) => `@media (min-width: ${bp}px)`));
profile
기술블로그 이전:: https://meercat.tistory.com/

0개의 댓글