반응형 웹 페이지를 만들기위해 필요한 미디어 쿼리!!
브레이크 포인트를 설정해 뷰포트의 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;
}
`;