미디어 쿼리 질문..

@use "@/styles/variables.scss" as *;

@mixin text {
  color: $color-gray-50;
  line-height: 2.6rem;
}

@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 {
        @include text;
      }

      .customerSupport {
        display: flex;
        width: 18rem;
        align-items: flex-start;
        gap: 3rem;

        .privacyPolicy {
          @include text;
        }

        .faq {
          @include text;
        }
      }

      .sns {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
      }
    }
  }

  @include tablet {
    .borderBox {
      padding: 3.2rem;
    }
  }

  @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;

@mixin mobile {
  @media (min-width: $breakpoint-mobile) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: $breakpoint-tablet)  {
    @content;
  }
}


@mixin desktop {
  @media (min-width: $breakpoint-pc) {
    @content;
  }
}

여기서 어느 사이즈든 모바일 미디어쿼리만 적용되고 있습니다.. 왜그런걸까요..

안녕하세요, 인프런 AI 인턴입니다.

레드판다님, 미디어 쿼리가 예상대로 동작하지 않는 상황에 대해 문제를 해결하는 데 도움이 필요하시군요.

제시해 주신 코드의 미디어 쿼리는 모바일, 태블릿, 데스크탑 각각에 대한 외적인 구간을 정의하고 있는데요, 모바일 미디어 쿼리만 적용된다고 하신다면 몇 가지 확인해볼 사항이 있습니다.

미디어 쿼리의 min-width 설정이 서로 겹치지 않도록 범위를 명확히 구분해야 합니다. 현재 $breakpoint-mobile이 375px로 설정되어 있어 모바일 미디어 쿼리가 375px 이상의 모든 화면 크기에서 적용됩니다. 이는 태블릿이나 데스크탑 환경에서도 모바일 미디어 쿼리가 적용될 수 있음을 의미합니다.
각 미디어 쿼리의 범위를 다음과 같이 수정할 수 있습니다.

// Mobile 스타일은 모바일 사이즈 이상에서 적용됩니다.
@mixin mobile {
  @media (min-width: $breakpoint-mobile) and (max-width: $breakpoint-tablet - 1px) {
    @content;
  }
}

// Tablet 스타일은 태블릿 사이즈 이상, 데스크탑 사이즈 미만에서 적용됩니다.
@mixin tablet {
  @media (min-width: $breakpoint-tablet) and (max-width: $breakpoint-pc - 1px) {
    @content;
  }
}

// Desktop 스타일은 데스크탑 사이즈 이상에서 적용됩니다.
@mixin desktop {
  @media (min-width: $breakpoint-pc) {
    @content;
  }
}

위와 같이 범위를 설정하면 각 기기의 크기에 맞게 스타일이 적용될 것입니다. 기존의 mixin 부분에 min-width와 max-width를 사용하여 각각의 범위를 명확히 해주세요.

이렇게 수정 후에도 문제가 해결되지 않는다면, CSS가 실제로 브라우저에 어떻게 로드되고 있는지 확인해보거나, 다른 부분의 CSS 규칙에 의해 상위 미디어 쿼리의 스타일이 덮어씌워지는지도 점검해야 할 수 있습니다.

추가적으로 코드가 명확하게 컴파일되고 있는지, 실제 브라우저에서 미디어 쿼리가 올바르게 해석되고 적용되는지 개발자 도구를 통해 확인해 보세요.

도움이 되었길 바라며, 추가적인 질문이 있으시면 문의해주시기 바랍니다.

인프런 커뮤니티 질문&답변