반응형
오류 상황
미디어쿼리를 다음과 같이 작성했음에도 모바일 화면에 원하는 결과가 나오지 않는 오류 발생
@media screen and (min-width: 320px) and (max-width: 800px) {
/*css코드*/
}라는 오류가 발생하고 onclick이벤트가 동작하지 않는 오류 발생
해결
html의 <head></head> 안에 다음 코드를 추가한다.
<meta name="viewport" content="width=device-width, initial-scale=1">width=device-width: 화면의 넓이를 디바이스의 넓이로 지정
initial-scale=1: 초기 화면 배율
참고: https://hohoya33.tistory.com/127
CSS 미디어 쿼리 디바이스별 해상도 분기점
기본적으로 반응형웹을 적용하기 위해서 먼저 HTML head 부분에 meta viewport를 설정해주어야 합니다. width=device-width: 화면의 넓이를 디바이스의 넓이로 지정 initial-scale=1: 초기 화면 배율 4개의 반응
hohoya33.tistory.com
반응형
'웹 프로그래밍 > HTML | CSS' 카테고리의 다른 글
| CSS Flex Box (0) | 2022.07.04 |
|---|---|
| CSS Display & Position (0) | 2022.07.04 |
| CSS 선택자 (0) | 2022.07.04 |
| HTML/CSS 참고 블로그 및 사이트 (0) | 2021.11.26 |