css. 미디어쿼리 분기점

1. meta viewport 설정

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

 

2. 4개의 반응형 분기점

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

- 태블릿 가로 : 768px ~ 1023px

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

- 모바일 : ~480px

 

3. 3개의 반응형 분기점

- PC : 1024px ~

- 태블릿 가로, 세로 : 768px ~ 1023px

- 모바일 가로, 세로 : ~768px

 

4. Media Query 사용법

@media screen and (min-width:1024px) {
	/* Desktop */
}
@media screen and (min-width:768px) and (max-width: 1023px) {
	/* Tablet */
}
@media screen and (max-width:767px){ 
	/* Mobile */
}

 

5. PC / Tablet / Mobile 구분해서 CSS 파일 작성 

<link href="style_pc.css" media="screen and (min-width:1024px)" rel="stylesheet" />
<link href="style_tablet.css" media="screen and (min-width:768px) and (max-width:1023px)" rel="stylesheet" />
<link href="style_mobile.css" media="screen and (min-width:320px) and (max-width:767px)" rel="stylesheet" />

 

 

별도 분기파일을 사용하는 방법은 http request를 발생시켜 성능을 저하시키는 단점이 있고, <style>태그를 사용하는 방법도 html 파일에서 inline으로 적용해야 하기 때문에 유지보수의 어려움이 증가한다.
따라서 CSS 내에서 @media를 사용하여 필요한 부분에 적용하는 것이 가장 좋은 방법이라고 할 수 있다고한다!

 

 

 

 

출처

https://eunyoe.tistory.com/entry/CSS-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9-%EB%94%94%EB%B0%94%EC%9D%B4%EC%8A%A4%EB%B3%84-%ED%95%B4%EC%83%81%EB%8F%84-%EB%B0%98%EC%9D%91%ED%98%95-%EB%B6%84%EA%B8%B0%EC%A0%90-%EB%A6%AC%EC%8A%A4%ED%8A%B8

[CSS] 반응형 웹 디바이스별 해상도 반응형 분기점 리스트

https://juni-official.tistory.com/134

반응형 웹 PC/Tablet/Mobile 미디어 쿼리 분기점

https://velog.io/@yijaee/%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9%EC%97%90%EC%84%9C-%EC%9A%94%EC%86%8C-%EB%A6%AC%EC%82%AC%EC%9D%B4%EC%A7%95%ED%95%98%EA%B8%B0

반응형 웹에서 요소 리사이징하기

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=anedthh&logNo=221311898334