Media Query 디바이스별 분기점

반응형할 때 꼭 필요한 내용이라

혹시 다시 작업할 때 잊어버릴까봐 포스팅합니다!

 

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" />

페이지가 많다면 해당 페이지 css마다

분기점만 정하여 미디어 쿼리를 넣어서 해도 무방합니다.

위처럼 굳이 나누지 않아도 괜찮습니다! (위는 또 다른 방법 중 하나의 예시일 뿐!)

 

6. Tip

그리고 추가적으로 정말 꿀팁은

반응형할 때 너무 세세하게 작업하지 않아도 된다는 것...

(예를 들어 PC에서 뷰포트 화면을 줄였는데

어느 특정 뷰포트에서 swiper 넘기는 카드 부분이 너무 딱 안맞는다던가하는 세부적인 것들...)

 

분기점을 나눠 작성하는 이유 자체가

모바일, 아이패드, PC

이 세 개의 디바이스를 지원하기 위해

사용을 하는 것이기 때문에 너무 디테일하게 들어가지 않아도 괜찮습니다.

(너무 나눠놓으면 나중에 수정사항 요청오거나할 때 유지보수하기 더 어려워질 수 있어요!)

 

ps. 반응형 처음 열심히 작업하고 있을 때 연구원님이 분기점 검색해보라고 꿀팁 주시고...

계속해서 반응형 작업할 때마다 항상 궁금했던 저 Tip...

고민되게 많이 했었는데 대표님이 속 시원하게 알려주셨다ㅜ..

다들 감사합니다,,ㅜ 좋은건 공유... 꿀팁 전파...

 

 

 

출처

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