방법 - 일반적인 장치 중단점
일반적인 장치 중단점에 미디어 쿼리를 사용하는 방법을 알아보세요.
일반적인 장치 중단점
높이와 너비가 다른 수많은 화면과 장치가 있으므로 각 장치에 대한 정확한 중단점을 만들기가 어렵습니다. 일을 단순하게 유지하기 위해 5개의 공통 그룹을 대상으로 지정할 수 있습니다.
예시
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
관련 페이지
CSS 튜토리얼: CSS 미디어 쿼리
CSS 튜토리얼: CSS 미디어 쿼리 예제
CSS 참조: @media 규칙
RWD 튜토리얼: 미디어 쿼리를 사용한 반응형 웹 디자인
JavaScript 튜토리얼: window.matchMedia() 메소드