HTML & SCSS (CSS3)

반응형 웹 - 디바이스별 반응형 분기점

오늘은 반응형 웹 디자인을 제작하기 위한 미디어 쿼리 해상도 분기점 리스트를 공유하려고 합니다.

👉 기본 설정

반응형웹을 적용하기 위해서는 먼저 meta viewport를 설정해주어야 합니다.

html <head> 태그에 뷰포트 태그를 선언해줍니다.

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

width=device-width : 화면의 넓이를 디바이스의 넓이로 지정

initial-scale=1: 기본 사이즈를 1로 지정함.

👉 디바이스별 분기점

👉 반응형 분기점

1. 낮은 해상도의 PC, 태블릿 가로 : ~1024px

2. 테블릿 가로 : 768px ~ 1023px

3. 모바일 가로, 태블릿 : 480px ~ 767px

4. 모바일 : ~ 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) { /*스타일입력*/}

💡 3개의 반응형 분기점

1. pc : 1024px ~

2. 테블릿 가로, 태블릿 세로 : 768px ~ 1023px

3. 모바일 가로, 모바일 세로 : ~ 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) { /*스타일입력*/}