<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vh / vw 与 字体图标</title>
<!-- 字体图标引用方法一 -->
<link rel="stylesheet" href="my_ico.css" />
<!-- 字体图标引用方法二 -->
<link rel="stylesheet" href="font_ico/iconfont.css">
<style>
/* 视口：可视窗口，手机端为了显示全PC页面，默认为980px */
/* 布局视口，只页面底层的设置，看不见 */
/* 视频视口，只页面上的设置，直观可见 */
/* 完美视口，只页面完美配置设备窗口大小1：1显示 */
/* vh: 1vh = 视口高度的 1 / 100 ，vh(view height) */
/* vh: 1vw = 视口宽度的 1 / 100 ，vw(view width) */
.box {
background-color: seagreen;
width: 50vw;
height: 25vh;
margin: auto; /* 页面盒子始终在页面中间，高度无法实现居中 */
}
.iconfont2 {
color: seagreen;
font-size: 55px;
/* background-color: slateblue; */
}
.icon-auto{
color: rgb(255, 0, 212);
font-size: 55px;
}
</style>
</head>
<body>
<div class="box"></div>
<!-- 字体图标引用方法一 -->
<span class="iconfont2"></span>
<br><p></p>
<!-- 字体图标引用方法二 -->
<span class="iconfont icon-auto"></span>
</body>
</html>