반응형
반응형 웹을 구현하기 위한 미디어 쿼리(모바일, 태블릿 기기 기준 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) {
}
반응형
'CSS' 카테고리의 다른 글
| [#. CSS] css gradient 그라데이션 색상 코드 제공해주는 사이트 (0) | 2021.01.12 |
|---|---|
| [#. CSS] 이미지 위에 텍스트, 글자 올리기 text on image (1) | 2020.12.24 |
| [#CSS] iframe 유튜브 영상 첨부 시 비율에 따라 크기 조절하기 (0) | 2020.09.18 |
| [#CSS] Swiper 슬라이드 생성하기, 이미지 슬라이드, 유튜브 슬라이드 (0) | 2020.09.17 |
| [CSS] Grid Layout, 그리드 레이아웃 사용하기 (0) | 2020.07.30 |
