반응형 웹개발을 위한 화면별 media query

 

목차

 

---

1. 모바일 기준

 

/* 모바일 화면에 대한 스타일 */
@media screen and (max-width: 767px) {
  /* 스타일 작성 */
}

모바일 기기의 경우, 대부분의 스마트폰과 작은 크기의 디바이스를 포함한다. 위의 미디어 쿼리에서는 화면 너비가 767px 이하일 때, 모바일 화면에 대한 스타일을 설정할 수 있다.

2. 태블릿 기준

 

/* 태블릿 화면에 대한 스타일 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* 스타일 작성 */
}

태블릿 기기는 일반적으로 화면 너비가 768px부터 1023px까지 범위에 해당한다. 위의 미디어 쿼리에서는 이 범위 내에서 태블릿 화면에 대한 스타일을 설정할 수 있다.

3. 노트북 기준

 

/* 노트북 화면에 대한 스타일 */
@media screen and (min-width: 1024px) and (max-width: 1365px) {
  /* 스타일 작성 */
}

노트북 화면은 일반적으로 화면 너비가 1024px부터 1365px까지 범위에 해당한다. 위의 미디어 쿼리에서는 이 범위 내에서 노트북 화면에 대한 스타일을 설정할 수 있다.

4. 데스크탑 기준

 

/* 데스크탑 화면에 대한 스타일 */
@media screen and (min-width: 1366px) {
  /* 스타일 작성 */
}

데스크탑 화면은 일반적으로 화면 너비가 1366px 이상일 때를 의미한다. 위의 미디어 쿼리에서는 이 범위 이상에서 데스크탑 화면에 대한 스타일을 설정할 수 있다.

 

5. 전체

 

/* 모바일 화면에 대한 스타일 */
@media screen and (max-width: 767px) {
  /* 스타일 작성 */
}

/* 태블릿 화면에 대한 스타일 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* 스타일 작성 */
}

/* 노트북 화면에 대한 스타일 */
@media screen and (min-width: 1024px) and (max-width: 1365px) {
  /* 스타일 작성 */
}

/* 데스크탑 화면에 대한 스타일 */
@media screen and (min-width: 1366px) {
  /* 스타일 작성 */
}