[CSS] 미디어 쿼리 브레이크 포인트 (Media Query Break Point)

하늘 No.340 [컴퓨터] 5223
[CSS] 미디어 쿼리 브레이크 포인트 (Media Query Break Point) Photo-Image
미디어 쿼리 브레이크 포인트 (Media Query Break Point) 


미디어 쿼리는 다양한 크기(해상도)의 디바이스에 맞춰서 CSS를 작성할 수 있게 도와준다. 거의 모든 브라우저에서 지원된다.

모바일 퍼스트 : min-width 사용
데스크톱 퍼스트 : max-width 사용
해상도 별 지정 : min-width, max-width 모두 사용 (덮어쓰기(override)를 사용하지 않음)

반응형 웹에는 두 가지 CSS 작성 방법을 적용할 수 있다. 데스크톱이나 뷰포트가 가장 큰 디바이스를 우선적으로 작성한 뒤 축소하면서 분기점을 추가하는 방식인 데스크톱 퍼스트. 가장 작은 디바이스를 우선으로 작성한 뒤 뷰포트를 확대하면서 분기점을 추가하는 방식은 모바일 퍼스트가 있다.

MDN에 따르면 모바일 퍼스트 방식이 선호되는 추세이며 최상의 접근법이라고 한다.

------

기본 설정
<head></head> 사이에 meta viewport를 작성해준다.
<meta name="viewport" content="width=device-width, initial-scale=1">

모바일 퍼스트
1. 기본 CSS 작성 (모바일, portrait)
2. 모바일, landscape
3. 태블릿
4. 데스크톱
5. 대형 뷰포트 데스크톱

예제
/* 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) {}



데스크톱 퍼스트
모바일이 활성화 되지 않았던 예전에 많이 사용하던 방식이다.

1. 모바일, portrait
2. 모바일, landscape
3. 태블릿
4. 데스크톱
5. 기본 CSS 작성 (대형 뷰포트 데스크톱)

예제
/* 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 없이 max-width와 min-width을 모두 사용해 디바이스 별로 css를 작성할 수 있도록 한다.

1. 모바일, portrait
2. 모바일, landscape
3. 태블릿
4. 데스크톱
5. 대형 뷰포트 데스크톱

예제
/* 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) {}


원문 : https://velog.io/@nemo/css-media-queries

https://SkyMoon.info/a/HeismeNote/340  

너는 어디에 있느냐? [하늘-나의 사랑아]