CSS 미디어 쿼리

min-width, max-width 차이

min-width: 1000px, 1000px 이상인 경우에 적용

max-width: 1000px, 1000px 이하인 경우에 적용

 

작성 순서 (모바일 퍼스트)

기본 CSS 작성 (모바일, portrait)

모바일, landscape

태블릿

데스크톱

대형 뷰포트 데스크톱

 

모바일 퍼스트(min-width)

/* Default CSS */
/* Mobile - Portrait */

/* Mobile - Landscape */
@media (min-width: 576px) {}

/* Tablet */
@media (min-width: 768px) {}

/* Desktop */
@media (min-width: 992px) {}

/* Desktop (Large) */
@media (min-width: 1200px) {}

 

데스크탑 퍼스트(max-width)

/* Mobile - Portrait */
@media (max-width: 575px) {}

/* Mobile - Landscape */
@media (max-width: 767px) {}

/* Tablet */
@media (max-width: 991px) {}

/* Desktop */
@media (max-width: 1199px) {}

/* Default CSS */

 

해상도 범위 지정 CSS 개발(no override)

/* Mobile - Portrait */
@media (max-width: 575px) {}

/* Mobile - Landscape */
@media (min-width: 576px) and (max-width: 767px) {}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {}

/* Desktop */
@media (min-width: 992px) and (max-width: 1199px) {}

/* Desktop (Large) */
@media (min-width: 1200px) {}

 

미디어쿼리 적용하는 방법

1. HTML의 link태그의 media속성에 값을 설정해 주는 방법

<link href="mobile.css" rel="stylesheet" media="screen and (min-width:0px) and (max-width:480px)">

 

2.  @import 구문 사용하기

 

3.  css파일 내에 직접 media를 설정해 주는 방법