반응형

📌 뷰포트

미디어쿼리 작성 시 필수 작성해야 하는 코드가 바로 viewport

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maxinum-scale=1, user-scale=no">

meta name="viewport" -> 뷰포트 선언
content="width=device-width -> 콘텐츠를 표현할 넓이(디바이스에 맞출꺼야!)
initial-scale=1 -> 초기 크기 설정(기본으로 꽉 찬 화면)
minimum-scale=1 -> 최소 크기 설정

기본값 : 0.225 / 범위 : 0 ~ 10.0

maxinum-scale=1 -> 최대 크기 설정

최대 배율 범위 : 0 ~ 10.0

user-scale=no -> 사용자 단말기의 확대기능 사용 유무

yes/no

✍ minimum, maximum은 사용자가 크기 조절 불가여서 적지 않아도 상관 X

그래서 아래처럼 작성 가능

<meta name="viewport" content="width=device-width, initial-scale=1>

---

📌 분기점

: 각각 디바이스의 해상도 기준

✍ 해상도(기기의 크기)

👉🏻 pc: 1920px

13인치 노트북 : 1280 ~ 1320px

👉 태블릿

가로 : 1024px / 세로 : 768px

👉🏻 모바일

• 최소 너비 : 320px
• 평균 너비 : 360 ~ 375px
• 아이폰 : 375px
• 안드로이드 : 360px

모바일은 최소 너비 기준 -> max-width : 767px

✍ 반응형 4개의 분기점

• 낮은 해상도의 pc, 태블릿의 가로 : ~ 1024px
• 태블릿 가로 : 768px ~ 1024px
• 모바일 가로, 태블릿 : 480px ~ 797px
• 모바일 : ~ 480px

/* pc, 태블릿 가로 (해상도 768px ~ 1023px) */
@media all and (min-width:768px) and (max-width:1023px) {
			div {
            	width: 600px;
                margin: 20px auto;
                background-color: skyblue;
            }
}

/* 태블릿 세로 (해상도 768px ~ 1023px) */
@media all and (min-width:768px) and (max-width:1023px) {
			div {
            	height: 600px;
            }
}

/* 모바일 가로, 태블릿 세로 (해상도 480px ~ 767px) */
@media all and (min-width:480px) and (max-width:767px) {
			div {
            	width: 300px;
                height: 450px;
                margin: 20px auto;
                background-color: dodgerblue;
            }
}

/* 모바일 가로, 태블릿 세로 (해상도 ~ 479px) */
@media all and (max-width:479px) {
			div {
            	width: 100px;
                height: 200px;
                margin: 20px auto;
                background-color: lightblue;
            }
}