[#. CSS] 반응형 웹 모바일, 태블릿 디바이스별 CSS 적용하기 미디어 쿼리 media query

 

 

 

 

 

반응형 웹을 구현하기 위한 미디어 쿼리(모바일, 태블릿 기기 기준 px)

 

/* 아이폰 SE */

@media only screen and (min-device-width : 320px) and (max-device-width : 374px) {

}

/* 스마트폰 모바일(세로) */

@media only screen and (min-device-width : 375px) and (max-device-width : 479px) {

}

/* 스마트폰 모바일(가로) */

@media only screen and (min-device-width : 480px) and (max-device-width : 767px) {

}

/* 태블릿, 아이패드 */

@media only screen and (min-device-width : 768px) and (max-device-width : 1023px) {

}

/* 아이패드 프로 */

@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) {

}