데스크탑 퍼스트 반응형 작업에 유용한 미디어쿼리 믹스인을 간단히 정리했습니다.
필요에 따라 특정 영역만을 위한 분기가 추가되거나 브레이크 포인트가 변경될 수 있겠습니다. 모바일 퍼스트 버전은 필요하게 되면 다시 만드는 걸로..
// // 미디어 쿼리 MIXIN // -------------------------------------------------- // Break Point (Desktop First 기준 내림차순 설정) $desktop-l-width : 1440px; $tablet-l-width : 1024px; $tablet-s-width : 768px; $mob-l-width : 640px; $mob-m-width : 425px; $mob-s-width : 375px; // only PC @mixin pc-only { @media screen and (min-width: $tablet-l-width + 1) { @content; } } // PC large @mixin pc-large { @media screen and (min-width: $desktop-l-width + 1) { @content; } } // -------------------------------------------------- // 태블릿 @mixin tab { @media screen and (max-width: $tablet-l-width) { @content; } } // 모바일 @mixin mob { @media screen and (max-width: $tablet-s-width - 1) { @content; } } // 모바일 large @mixin mob-large { @media screen and (max-width: $mob-l-width) { @content; } } // 모바일 mid @mixin mob-mid { @media screen and (max-width: $mob-m-width) { @content; } } // 모바일 small @mixin mob-small { @media screen and (max-width: $mob-s-width) { @content; } }