scss 미디어쿼리 질문..

Question

&#64;use &#34;&#64;/styles/variables.scss&#34; as *; &#64;mixin text { color: $color-gray-50; line-height: 2.6rem; } &#64;include desktop { .borderBox { position: fixed; bottom: 0; display: flex; width: 100%; min-width: 37.5rem; height: 10rem; padding: 3.7rem 23.8rem; flex-direction: column; align-items: flex-start; gap: 0.8rem; background: $color-gray-10; .contentBox { display: flex; justify-content: space-between; align-items: center; align-self: stretch; .company { &#64;include text; } .customerSupport { display: flex; width: 18rem; align-items: flex-start; gap: 3rem; .privacyPolicy { &#64;include text; } .faq { &#64;include text; } } .sns { display: flex; align-items: flex-start; gap: 1rem; } } } &#64;include tablet { .borderBox { padding: 3.2rem; } } &#64;include mobile { .borderBox { height: 12.6rem; padding: 3.2rem; flex-wrap: wrap; .contentBox { flex-wrap: wrap-reverse; justify-content: space-between; .content { width: 35%; } .company { margin-top: 2.5rem; width: 100%; } .sns { justify-content: flex-end; } } } } } $breakpoint-mobile: 375px; $breakpoint-tablet: 744px; $breakpoint-pc: 1200px; &#64;mixin mobile { &#64;media (min-width: $breakpoint-mobile) { &#64;content; } } &#64;mixin tablet { &#64;media (min-width: $breakpoint-tablet) { &#64;content; } } &#64;mixin desktop { &#64;media (min-width: $breakpoint-pc) { &#64;content; } }여기서 어느 사이즈든 모바일 미디어쿼리만 작동하고 있습니다... 뭐가 문제인걸까요..

엘신 · Accepted Answer

동일한 요소에 대한 스타일을 지정할 경우, 가장 마지막에 선언된 스타일이 먼저 적용됩니다.&#64;include desktop 요소를 &#64;include mobile보다 하단에 위치시키면 제대로 동작할 겁니다.

scss 미디어쿼리 질문..

1개의 답변

Q&A 목록