미디어 쿼리란?
pc뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기위해 모바일에 대응되는 반응형또는 적응형 웹사이트를 만즐때 사용되는 css구문
min-width,max-width
브라우저 가로폭 설정
미디어쿼리 사용시 주의사항
미디어 코리가 제대로 작동하지 않는 문제가 발생할수 있으므로
viewport로 너비와 배율을 설정해야 모바일 디바이스에서 의도한
화면을 볼수 있다.
html의 head 태그안에 아래 코드 추가
<meta name="viewport" content="width=device-width, initial-scale=1"> 여기서 width에 해당되는것은 viewport의 가로폭=디바이스의 가로폭
initial-scale은 비율! 항상 1.0고정
Viewport
미디어쿼리가 제대로 작동하지 않는 문제가 발생할 수 있으므로 이것 으로 너비와 배율을 설정해야 모바일 디바이스에서 의도한 화면을 볼 수 있습니다.
또한, 이것은 다양한 디지털 기기의 화면 상에 표시되는 영역을 의미하고, 너비와 배율을 설정할 때 사용하는 메타 태그의 속성 중 하나입니다.
