이번에는 CSS3의 새로운 단위를 사용하는 방법에 대해 자세히 설명하겠습니다. CSS3의 새로운 단위를 사용할 때 주의사항은 무엇인가요?
이 글에서는 CSS3의 새로운 단위인 vw, vh, vmin, vmax의 사용에 대한 자세한 설명을 소개하고, 자세한 내용은 다음과 같습니다:
1, vw, vh, vmin, vmax의 의미
(1) vw, vh, vmin 및 vmax는 창 단위이자 상대 단위입니다. 이는 페이지의 상위 노드나 루트 노드와 관련이 없습니다. 뷰포트의 크기에 따라 결정됩니다. 단위는 1이며 이는 1%와 같습니다.
뷰포트는 브라우저가 실제로 콘텐츠를 표시하는 영역입니다. 즉, 도구 모음과 버튼이 없는 웹 브라우저입니다.
(2) 구체적인 설명은 다음과 같습니다.
vw: 창 너비의 백분율(1vw는 창 너비의 1%를 나타냄)
vh: 창 높이의 백분율
vmin: 현재 vw의 작은 값 및 vh
vmax: 현재 vw 및 vh의 더 큰 값
2, vw, vh 및 % 백분율의 차이
(1) %는 상위 요소 vw 및 vw의 크기에 상대적으로 설정된 비율입니다. vh는 창 크기에 따라 결정됩니다.
(2) vw와 vh의 장점은 높이를 직접 얻을 수 있다는 점입니다. 그러나 %를 사용하면 신체 높이를 설정하지 않으면 시각 영역의 높이를 정확하게 얻을 수 없으므로 이는 좋은 장점입니다.
3. vmin 및 vmax 사용
모바일 페이지 개발 시 vw 및 wh를 사용하여 글꼴 크기(예: 5vw)를 설정하면 세로 모드와 가로 모드에서 표시되는 글꼴 크기가 달라집니다.
vmin과 vmax는 현재 더 작은 vw와 vh이고 현재 더 큰 vw와 vh이기 때문입니다. 여기서는 vmin과 vmax를 사용할 수 있습니다. 가로 및 세로 화면 모두에서 텍스트 크기를 일관되게 만듭니다.
4, 브라우저 호환성
(1) 데스크톱 PC
Chrome: 버전 26(2013년 2월)부터 완벽 지원
Firefox: 버전 19(2013년 1월)부터 완벽 지원
Safari: 버전 6.1(10월)부터 완벽 지원 2013)
Opera: 버전 15부터 완벽하게 지원됨(2013년 7월)
IE: IE10(Edge 포함)부터 여전히 부분적으로만 지원됩니다(vmax는 지원하지 않고 vm은 vmin을 대체함)
(2) 모바일 장치
Android: 버전 4.4(2013년 12월)부터 완벽 지원
iOS: iOS8 버전(2014년 9월)부터 완벽 지원
2 간단한 예
1, 페이지 코드
뷰포트 단위는 요소의 너비와 높이를 사용할 수 있지만 텍스트에도 사용할 수 있습니다. 다음으로 vw를 사용하여 반응형 텍스트를 구현하기 위한 글꼴 크기를 설정합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<style>
html, body, p, span, h1, h2, h3 {
margin: 0;
padding: 0;
border: 0;
}
.demo {
width: 100vw;
font-size: 5vw;
margin: 0 auto;
background-color: #50688B;
color: #FFF;
}
.demo2 {
width: 80vw;
font-size: 5vw;
margin: 0 auto;
background-color: #ff6a00;
}
.demo3 {
width: 50vw;
height: 50vh;
font-size: 1vw;
margin: 0 auto;
background-color: #ff006e;
color: #FFF;
}
</style>
</head>
<body>
<p class="demo">
<h1>宽度100％, 字体5％</h1>
</p>
<p class="demo2">
<h2>宽度80％, 字体5％</h2>
</p>
<p class="demo3">
<h3>宽度50％, 高度50％, 字体1％</h3>
</p>
</body>
</html>2, 렌더링
3. 레이어를 마스크하여 완전한 적용 범위 달성
때로는 팝업 상자를 강조 표시하거나 페이지 요소를 클릭하는 것을 방지하기 위해. 전체 가시 영역을 덮는 반투명 마스크가 필요하며 이는 vw 및 vh를 사용하여 쉽게 얻을 수 있습니다.
1, 샘플 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<style>
html, body, p, span, button {
margin: 0;
padding: 0;
border: 0;
}
button {
width: 120px;
height: 30px;
color: #FFFFFF;
font-family: "微软雅黑";
font-size: 14px;
background: #28B995;
}
#mask {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: #000000;
opacity: 0.5;
display: none;
}
</style>
</head>
<body>
<button onclick="document.getElementById('mask').style.display='inline'">点击显示遮罩</button>
<p id="mask" onclick="document.getElementById('mask').style.display='none'"/></p>
</body>
</html>2, 렌더링
IV. 중앙 팝업 상자 구현
1, 팝업 상자의 크기가 콘텐츠에 맞게 조정됩니다.
( 1) 효과 사진 예시
팝업 버튼을 클릭하면 전체 화면 중앙에 팝업 상자가 나타납니다.
팝업 상자의 크기는 콘텐츠(로고 그림)의 크기에 따라 조정되며, 팝업 상자 뒤에 전체 화면을 덮는 반투명 마스크 레이어가 있습니다.
닫기 버튼을 클릭하면 팝업 상자가 숨겨집니다.
(2) 샘플 코드
마스크 레이어는 vw 및 vh를 사용하여 전체 화면 범위를 달성합니다. 팝오버는 마스크 레이어에 추가되고 중앙에 배치됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
html, body, p, span, button {
margin: 0;
padding: 0;
border: 0;
}
button {
width: 120px;
height: 30px;
color: #FFFFFF;
font-family: "微软雅黑";
font-size: 14px;
background: #28B995;
}
.dialog-container {
display: none;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.35);
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.dialog-container:after {
display: inline-block;
content: '';
width: 0;
height: 100%;
vertical-align: middle;
}
.dialog-box {
display: inline-block;
border: 1px solid #ccc;
text-align: left;
vertical-align: middle;
position: relative;
}
.dialog-title {
line-height: 28px;
padding-left: 5px;
padding-right: 5px;
border-bottom: 1px solid #ccc;
background-color: #eee;
font-size: 12px;
text-align: left;
}
.dialog-close {
position: absolute;
top: 5px;
right: 5px;
font-size: 12px;
}
.dialog-body {
background-color: #fff;
}
</style>
</head>
<body>
<button onclick="$('#dialogContainer').show();">点击显示弹出框</button>
<p id="dialogContainer" class="dialog-container">
<p class="dialog-box">
<p class="dialog-title">居中弹出框</p>
<a onclick="$('#dialogContainer').hide();" class="dialog-close">关闭</a>
<p class="dialog-body">
<img src="logo.png" class="demo-image" />
</p>
</p>
</p>
</body>
</html>2, 창 크기에 따라 팝업 상자 크기가 달라집니다
（1）样例效果图
点击弹出按钮后，会显示一个在整个屏幕上居中显示的弹出框。
弹出框的大小不再由内容的大小决定，而是随视窗大小改变（宽高均为屏幕可视区域的 80%）。
点击关闭按钮后，则隐藏弹出框。
（2）样例代码
遮罩层使用 vw、vh 实现全屏覆盖。而弹出框的尺寸位置同样使用 vw、vh 设置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
html, body, p, span, button {
margin: 0;
padding: 0;
border: 0;
}
button {
width: 120px;
height: 30px;
color: #FFFFFF;
font-family: "微软雅黑";
font-size: 14px;
background: #28B995;
}
.dialog-container {
display: none;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.35);
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.dialog-box {
top:10vh;
left:10vw;
width: 80vw;
height: 80vh;
text-align: left;
position: absolute;
border: 1px solid #ccc;
display: flex;
flex-direction: column;
}
.dialog-title {
line-height: 28px;
padding-left: 5px;
padding-right: 5px;
border-bottom: 1px solid #ccc;
background-color: #eee;
font-size: 12px;
text-align: left;
}
.dialog-close {
position: absolute;
top: 5px;
right: 5px;
font-size: 12px;
}
.dialog-body {
background-color: #fff;
flex:1;
overflow: auto;
}
</style>
</head>
<body>
<button onclick="$('#dialogContainer').show();">点击显示弹出框</button>
<p id="dialogContainer" class="dialog-container">
<p class="dialog-box">
<p class="dialog-title">居中弹出框</p>
<a onclick="$('#dialogContainer').hide();" class="dialog-close">关闭</a>
<p class="dialog-body">
<img src="logo.png" class="demo-image" />
</p>
</p>
</p>
</body>
</html>五、显示大图时限制其最大尺寸
我们还可以通过视图单位来限制一些元素的最大宽度或高度，避尺寸过大而超出屏幕。
1，效果图
（1）点击按钮，在屏幕中央显示原始图片的大图。
（2）如果图片原始宽高均不超过屏幕宽高的 90%，则显示图片的默认大小。
（3）如果图片原始宽高均超过屏幕宽高的 90%，则限制为屏幕的 90%，使其能够完全显示。
2，样例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
html, body, p, span, button {
margin: 0;
padding: 0;
border: 0;
}
button {
width: 120px;
height: 30px;
color: #FFFFFF;
font-family: "微软雅黑";
font-size: 14px;
background: #28B995;
}
.dialog-container {
display: none;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.35);
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.dialog-container:after {
display: inline-block;
content: '';
width: 0;
height: 100%;
vertical-align: middle;
}
.dialog-box {
display: inline-block;
text-align: left;
vertical-align: middle;
position: relative;
}
.demo-image {
max-width: 90vw;
max-height: 90vh;
}
</style>
</head>
<body>
<button onclick="$('#dialogContainer').show();">点击显示大图</button>
<p id="dialogContainer" class="dialog-container" onclick="$('#dialogContainer').hide();">
<p class="dialog-box">
<img src="image.jpg" class="demo-image" />
</p>
</p>
</body>
</html>六、实现 Word 文档页面效果
1，效果图
（1）使用 vh 单位，我们可把 web 页面做得像 Office 文档那样，一屏正好一页。改变浏览器窗口尺寸，每页的大小也会随之变化。
（2）拖动滚动条，我们可以一直往下看到最后一页。
2，样例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
html, body, p, span, button {
margin: 0;
padding: 0;
border: 0;
}
body {
background-color: #789BC9;
}
page {
display: block;
height: 98vh;
width: 69.3vh;
margin: 1vh auto;
padding: 12vh;
border: 1px solid #646464;
box-shadow: 0 0 15px rgba(0,0,0,.75);
box-sizing: border-box;
background-color: white;
position: relative;
}
page:after {
content: attr(data-page);
color: graytext;
font-size: 12px;
text-align: center;
bottom: 4vh;
position: absolute;
left: 10vh;
right: 10vh;
}
a {
color: #34538b;
font-size: 14px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var lenPage = $("page").length;
//自动添加每页底部的页码
$("page").each(function(i){
$(this).attr("data-page", "第 "+ (i+1) +" 页，共 "+ lenPage +" 页");
});
});
</script>
</head>
<body>
<page><a href="http://hangge.com">欢迎访问 hangge.com</a></page>
<page></page>
<page></page>
</body>
</html>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
위 내용은 CSS3의 새로운 단위 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
