SCSS Media Query

// Break Point
$tablet: 768px;
$laptop: 1020px;
$desktop: 1400px;
 
 
// Mixins
@mixin tablet {
  @media (min-width: #{$tablet}) {
    @content;
  }
}
 
@mixin laptop {
  @media (min-width: #{$laptop}) {
    @content;
  }
}
 
 
@mixin desktop {
  @media (min-width: #{$desktop}) {
    @content;
  }
}

.logo {
  width: 20px;
 
  @include desktop {
    width: 40px;
  }
}

반응형 웹 뚝딱 만들기 (1) - 뷰포트 메타태그와 미디어 쿼리

이 글은 공동 기술 블로그(tech.yeon.me)에도 올린 글입니다. (여기에서도 숨겨진 좋은 글을 발견할지도 몰라요!) 모바일 사용자가 점점 늘어나는 요즘 반응형으로 만든 웹 사이트를 쉽게 찾아볼 수 있습니다. 빠트릴 수 없는 기술이 된 만큼, 오늘은 반응형을 만들기 위한 몇 가지 방법들을 정리해봤습니다 🤘 이 글에서는 반응형을 위한 기본인 뷰포트와 미디어 쿼리를 다루며, 다음 글에서는 CSS 속성을 활용해 빠르게 반응형을 만드는 법을 다룰 생각입니다.

https://nykim.work/84