HTML이 화면 너비에 맞게 웹 디자인을 자동으로 조정하는 방법

오늘 이 글은 HTML이 웹 디자인을 화면 너비에 맞게 자동으로 조정하는 방법에 대해 주로 설명합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

웹 페이지 너비가 자동으로 조정되도록 허용

"적응형 웹 디자인"은 어떻게 작동하나요? 그다지 어렵지 않습니다.

먼저 웹페이지 코드 상단에 viewport 메타태그 한 줄을 추가하세요.

viewport은 웹페이지의 기본 너비와 높이를 의미합니다. 위의 코드 줄은 이며, 웹 페이지의 너비는 기본적으로 화면 너비와 동일하며(width=device-width) 원래 크기 조정 비율(initial-scale=1)은 1.0, 즉 초기 크기입니다. 웹페이지가 화면 영역의 100%를 차지합니다.

IE9를 포함한 모든 주요 브라우저는 이 설정을 지원합니다. 이전 브라우저(주로 IE6, 7, 8)의 경우 css3-mediaqueries.js를 사용해야 합니다.