3개의 반응형 분기점
- PC : 1024px ~
- 테블릿 가로, 태블릿 세로 : 768px ~ 1023px
- 모바일 가로, 모바일 세로 : ~ 768px
/* PC (해상도 1024px)*/
@media all and (min-width:1024px) {
...
}
/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) {
...
}
/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) {
...
}
4개의 반응형 분기점
- 낮은 해상도의 PC, 태블릿 가로 : ~1024px
- 테블릿 가로 : 768px ~ 1023px
- 모바일 가로, 태블릿 : 480px ~ 767px
- 모바일 : ~ 480px
/* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) {
...
}
/* 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) {
...
}
/* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
@media all and (min-width:480px) and (max-width:767px) {
...
}
/* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/
@media all and (max-width:479px) {
...
}
'[ Web 관련 ] > HTML, CSS' 카테고리의 다른 글
모바일 사파리에 비디오(MP4) 실행 안되는 경우 (또는 인라인 재생안되는 경우) (0) | 2023.02.14 |
---|---|
placeholder 텍스트 컬러 스타일 (0) | 2022.12.05 |
a 태그 (0) | 2022.06.03 |
이미지 사이즈 축소시 흐릿해지는 현상 수정 (CSS) (0) | 2022.05.09 |
셀렉트 박스 화살표 (0) | 2021.12.15 |