어떻게 만들지: 표준 장치 브레이크포인트

일반적인 장치 브레이크포인트에 대한 미디어 쿼리를 사용하는 방법을 배웁니다.

표준 장치 브레이크포인트

다양한 높이와 너비를 가진 많은 스크린과 장치가 존재하기 때문에 각 장치에 대한 정확한 브레이크포인트를 만들기는 어렵습니다.

작업을 간소화하기 위해 다섯 가지 일반적인 그룹을 정의할 수 있습니다:

예제

/* 초소형 장치(핸드폰, 600px 이하) */
@media only screen and (max-width: 600px) {...}
/* 소형 장치( 세로 태블릿和大화면 핸드폰, 600px 이상) */
@media only screen and (min-width: 600px) {...}
/* 중형 장치(가로 태블릿, 768px 이상) */
@media only screen and (min-width: 768px) {...}
/* 대형 장치(노트북/데스크톱, 992px 이상) */
@media only screen and (min-width: 992px) {...}
/* 초대형 장치(대화면 노트북과 데스크톱, 1200px 이상) */
@media only screen and (min-width: 1200px) {...}

직접 테스트 해보세요

관련 페이지

교육 자료：CSS 미디어 쿼리

교육 자료：CSS 미디어 쿼리 예제

참조 설명서：CSS @media 규칙

교육 자료：미디어 쿼리를 통해 반응형 웹 디자인 구현

참조 설명서：JavaScript window.matchMedia() 메서드