반응형 디자인에서 CSS 새 단위 vw 및 vh를 사용하는 방법
- 高洛峰원래의
- 2017-03-23 10:53:051747검색
향후 반응형 디자인 개발을 고려하여 필요한 경우 백분율 값에 따라 브라우저 높이를 조정할 수도 있습니다. 그러나 백분율 기반 값을 사용하는 것이 브라우저 창의 크기를 기준으로 정의하는 가장 좋은 방법은 아닙니다. 예를 들어, 이제 CSS3에 도입된 새로운 단위는 이 문제를 명확하게 해결합니다. .
css3에서 도입된 "vw" 및 "vh"는 창 크기에 상대적인 너비/높이를 기반으로 합니다. 위의 "vw" = "보기 너비", "vh" = "보기 높이"입니다. 창 단위 허용을 호출합니다. 브라우저 창에 더 가까운 크기를 정의합니다. 다음 네 가지 컨테이너의 CSS 스타일을 비교하려면 데모 사례를 참조하세요.
.demo {
width: 100vw;
font-size: 10vw; /* 宽度为窗口100%， 字体大小为窗口的10% */
}
.demo2 {
width: 80vw;
font-size: 8vw; /* 宽度为窗口80%， 字体大小为窗口的8% */
}
.demo3 {
width: 50vw;
font-size: 5vw; /* 宽度为窗口50%， 字体大小为窗口的5% */
}
.demo4 {
width: 10vw;
height: 50vh; /* 宽度为窗口10%， 容器高度为窗口的50% */
}
html代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<div class="demo">1</div>
<div class="demo2">2</div>
<div class="demo3">3</div>
<div class="demo4">4</div>
</html>데모 창을 축소하여 다양한 크기의 변경 사항을 확인할 수 있습니다. 현재 이 CSS3 애플리케이션은 모든 주요 브라우저를 지원하며 IE는 10 이상이어야 합니다.
위 내용은 반응형 디자인에서 CSS 새 단위 vw 및 vh를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.