1.기본세팅
메타태그 설정
<meta name="viewport" content="width=device-width, initial-scale=1.0">
반응형 전용 css파일 생성 (responsive.css)
<link rel="stylesheet" href="css/responsive.css">
미디어쿼리 설정
1.모바일 버전 (320px*768px)
@media screen and (max-width:768px){
}
>width(가로)가 최대 사이즈 768px 에 대한 설정
작업은 320px기준(최소 사이즈)으로 작업
2.태블릿 버전(769px*1200px)
@media screen and (max-width:1200px){
}
*주의사항
-respoinsive.css(반응형 세팅 css)파일은 html파일 <head>에서 제일 하단에 위치시켜주어야 한다.
-반응형 css는 태블릿 버전(max-width:1200px)이 모바일 버전(max-width:768px)보다 위에 위치하여야 한다.
'html5 > 반응형' 카테고리의 다른 글
| 기존 태그 적용해제 (0) | 2022.08.01 |
|---|