반응형웹
- head 뷰포트 설정 확인
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <head>
- 미디어쿼리 작성
@media screen and (max-width: 1200px) { ... }
미디어쿼리 @media
- 보통 많이쓰는 breakpoint: 1200px, 992px, 768px, 576px으로
어디부터 태블릿, 모바일 디자인 넣을지는 정하기 나름이다 (3~4개 정도가 적당)- 큰 사이즈 -> 작은 사이즈 순으로 작성해주자
//1200px이하 @media screen and (max-width: 1200px) { ... } //768px이하 @media screen and (max-width: 768px) { ... } //576px이하 @media screen and (max-width: 576px) { ... }
