미디어 쿼리

SVG의 큰 장점은 뷰포트 사이즈에서 작업하는 대신 미디어 쿼리(media query)를 통해 이미지 사이즈를 변경할 수 있다는 것입니다. 각 요소의 쿼리를 실행해 구현할 수 있습니다. 멋지죠. 이를 통해 실제 보여지는 SVG 사이즈를 제어할 수 있습니다.

모든 이미지 사이즈에서 회사 로고가 올바르게 보여지게 하려면 어떻게 해야할까요. 어렵지 않습니다! 미디어 쿼리를 통해 크기에 따라 형식을 변경할 수 있습니다. background-image와 별도로 모든 브라우저 내에서 구현할 수 있습니다.(IE9-11은 breakpoint을 무시할 수 있습니다) 아래 슬라이더를 움직여 확인해보세요.


이미지 확인하기 https://goo.gl/xF5V4H