반응형 태그를 작성해도 테블릿 모바일 버전이 먹히지 않을때
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="/메인css파일경로.css">
<link rel="stylesheet" type="text/css" media="all and (max-width: 1199px)" href="/테블릿버전css파일경로.css">
<link rel="stylesheet" type="text/css" media="all and (max-width: 760px)" href="/모바일버전css파일경로.css">
</head>✅html
1) head태그에 반응형용 태그를 작성한다
2) 기존 css를 연결한다( 연결되어 있다면 꼭 반응형css보다 위에 위치)
3) 테블릿과 모바일 버전의 css를 연결한다
✔️ head태그 안에 작성
✔️ 기존 css보다 반응형 css가 하단에 와야한다! 위에서 아래로 읽히기때문
✔️ css height, min과 같은 고정값을 사용할때 반응형이 어려울 수 있으니 주의해서 사용
'Coding > html' 카테고리의 다른 글
| [html] 웹사이트 구글지도 띄우기 (0) | 2022.06.17 |
|---|---|
| [html] 버튼 클릭 시 alert메시지 띄우기 (0) | 2022.06.15 |