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) { /*스타일입력*/}

저작자표시

'HTML & SCSS (CSS3)' 카테고리의 다른 글

linear-gradient 속성에 transition 적용하기 (0)	2023.12.25
CSS로 아이콘과 텍스트를 수평 정렬하기 (0)	2023.12.01
grid(3) (1)	2023.11.23
grid(2) (1)	2023.11.20
grid(1) (0)	2023.11.19

Contents

새소식

인기 검색어