일반적으로 사용되는 해상도별 미디어 쿼리 예시

기본 미디어 쿼리 예시

/* 스마트폰 세로 모드 */
@media (max-width: 599px) {
    /* 스마트폰에 적용될 CSS */
}

/* 스마트폰 가로 모드 */
@media (min-width: 600px) and (max-width: 899px) {
    /* 가로 모드 스마트폰에 적용될 CSS */
}

/* 태블릿 세로 모드 */
@media (min-width: 900px) and (max-width: 1199px) {
    /* 태블릿 세로 모드에 적용될 CSS */
}

/* 태블릿 가로 모드 */
@media (min-width: 1200px) and (max-width: 1599px) {
    /* 태블릿 가로 모드에 적용될 CSS */
}

/* 작은 데스크탑 */
@media (min-width: 1600px) and (max-width: 1919px) {
    /* 작은 데스크탑에 적용될 CSS */
}

/* 일반 데스크탑 */
@media (min-width: 1920px) {
    /* 일반 데스크탑에 적용될 CSS */
}

 

특정 장치별 미디어 쿼리

/* 아이폰 SE, 5, 5s, 5c */
@media (max-width: 320px) {
    /* 아이폰 SE, 5, 5s, 5c에 적용될 CSS */
}

/* 아이폰 6, 7, 8 */
@media (min-width: 375px) and (max-width: 667px) {
    /* 아이폰 6, 7, 8에 적용될 CSS */
}

/* 아이폰 6+, 7+, 8+ */
@media (min-width: 414px) and (max-width: 736px) {
    /* 아이폰 6+, 7+, 8+에 적용될 CSS */
}

/* 아이패드 */
@media (min-width: 768px) and (max-width: 1024px) {
    /* 아이패드에 적용될 CSS */
}

/* 고해상도 데스크탑 */
@media (min-width: 2560px) {
    /* 고해상도 데스크탑에 적용될 CSS */
}

 

방향에 따른 미디어 쿼리 

세로 모드 (Portrait)

@media (orientation: portrait) {
    /* 세로 모드에 적용될 CSS */
}

가로 모드 (Landscape)

@media (orientation: landscape) {
    /* 가로 모드에 적용될 CSS */
}

 

예시 사용 방법

/* 기본 스타일 */
body {
    font-size: 16px;
}

/* 스마트폰 세로 모드 */
@media (max-width: 599px) {
    body {
        font-size: 14px;
    }
}

/* 태블릿 세로 모드 */
@media (min-width: 900px) and (max-width: 1199px) {
    body {
        font-size: 18px;
    }
}

/* 일반 데스크탑 */
@media (min-width: 1920px) {
    body {
        font-size: 20px;
    }
}

위의 예시를 참고하여 각 해상도에 맞는 CSS 스타일을 설정할 수 있습니다. 필요한 해상도나 장치에 따라 미디어 쿼리를 추가로 조정해 사용하세요.