Media Query (미디어 쿼리)

Media Query (미디어 쿼리)

= 반응형 처리

👉 작성 위치

1. 각 css 파일 하단
2. response.css 파일을 생성
3. 소스 바로 밑에 작성 (scss)
   
   

👉 문법

@media (screen) {
	@content;
}

👉 작성 스타일

<style>
//대략 구현이 안될 것 같은 넓이에서 작업. 보통 1200 이상
/* 1025 ~ 1200px까지 보이는 화면. 최소치인 1025를 보고 작업 */
@media (max-width:1200px) {
	@content;
}

//아래 2가지 사이즈는 대부분 정해져있다.
/* 768 ~ 1024px까지 보이는 화면. 최소치인 768을 보고 작업 */
@media (max-width:1024) {  //태블릿
	@content;
}

/* 320 ~ 767px까지 보이는 화면. 최소치인 320을 보고 작업 */
@media (max-width:767px) {  //모바일, 767px 또는 768px
	@content;
}
</style>

👉 SCSS에서의 작성 방법

.scss 하단에 작성

<style>
@media (max-width: 1200px) {
	@content;  //scss 규칙대로 상속 가능
}
</style>

또는

1) mixins.scss

<style>
/* 반응형 화면 크기 */
$mobile: 767px;  //320
$tablet: 1023px;  //768 (모바일, 태블릿은 고정)
$desktop: 1280px;  //1024 (데스크탑은 유동적)

/* 반응형, 브라우저 크기가 767px 이하일 때 */
@mixin mobile{
  @media (max-width: $mobile){ 
    @content;
  }
}

/* 반응형, 브라우저 크기가 768px 이상, 1023px 이하일 때 */
@mixin tablet{
  @media (max-width: $tablet){ 
    @content;
  }
}

/* 반응형, 브라우저 크기가 1024px 이상일 때 */
@mixin desktop{ 
  @media (max-width: $desktop){ 
    @content;
  }
}
</style>

이름과 브라우저 크기 세팅 @media(선언) 후,

2) 소스 바로 밑에 작성

<style>
.header{
    width: 100%;

	/*👇 여기에 작성 */
    @include tablet{
		width: 350px;
	}

	@include mobile{
		width: 100%;
	}
}
</style>

소스 바로 아래에 원래 scss의 규칙대로 상속, @include(포함) 시키기