如何调整纯CSS绘制的Diglett地鼠代码使其适配各类视口

修改说明 #

• 全局样式重置：给html和body添加100%高度、取消默认边距，避免浏览器默认样式干扰布局
• 父容器定位优化：给.diglett设置满视口高度、相对定位，给.body也设置相对定位，所有内部绝对定位的五官元素都会相对于地鼠本体偏移，不会随视口宽度变化错位
• 单位统一替换：将所有固定px单位替换为vmin相对单位，地鼠整体会按照视口最小边等比缩放，在手机、平板、桌面端都能保持原有比例不变形
• 五官定位修正：将原来相对于视口的百分比偏移调整为相对于.body的适配值，保证缩放过程中五官位置始终正确

调整后完整代码 #

HTML代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Diglett</title>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="diglett">
    <div class="body">
      <div class="eyes">
        <div class="left-eye"></div>
        <div class="right-eye"></div>
        <div class="eye-shines"></div>
      </div>
      <div class="head">
        <div class="head-shine"></div>
        <div class="head-shine2"></div>
      </div>
      <div class="mouth"></div>
      <div class="mouth-shine"></div>
      <div class="mouth-shine2"></div>
      <div class="soil"></div>
    </div>  
  </div>    
</body>
</html>

CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  width: 100%;
}
.diglett {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  position: relative;
}

.body {
  height: 30vmin;
  width: 26vmin;
  background-color: #b1917e;
  border-radius: 13vmin 13vmin 0 0;
  border-top: 0.26vmin solid #040202;
  border-right: 0.26vmin solid #040202;
  border-left: 0.26vmin solid #040202;
  overflow-y: hidden;
  position: relative;
}

.head-shine {
  position: relative;
  left: 0;
  top: 0;
  height: 6.5vmin;
  width: 18vmin;
  color: #c9b3a4;
  background-color: currentColor;
  filter: blur(1vmin);
  border-radius: 13vmin / 6.5vmin;
  transform: rotate(160deg);
  z-index: 1;
}

.head-shine2 {
  position: relative;
  left: -1.3vmin;
  top: -32.5vmin;
  height: 26vmin;
  width: 13vmin;
  color: #b49580;
  filter: blur(1.3vmin);
  border-radius: 50%;
  transform: rotate(80deg);
}

.left-eye{
  position: absolute;
  height: 4vmin;
  width: 1vmin;
  border-radius: 40% 40%;
  color: black;
  background-color: black;
  transform: rotate(5deg);
  box-shadow: 
      inset -0.13vmin -0.8vmin 0.9vmin -0.26vmin #595a5a;
  border: solid 0.26vmin black;
  left: 22%;
  top: 8%;
  z-index: 2;
}

.right-eye{
  position: absolute;
  height: 4vmin;
  width: 1vmin;
  border-radius: 40% 40%;
  color: black;
  background-color: black;
  transform: rotate(5deg);
  box-shadow: 
      inset -0.13vmin -0.8vmin 0.9vmin -0.26vmin #595a5a;
  border: solid 0.26vmin black;
  left: 65%;
  top: 8.2%;
  z-index: 2 ;
}

.eye-shines{
  position: absolute;
  height: 0.9vmin;
  width: 0.8vmin;
  background-color: white;
  border-radius: 50%;
  left: 23%;
  top: 8.2%;
  box-shadow: 
      10.8vmin 0 0 0 white;
  z-index: 8;
  filter: blur(0.1vmin);
  transform: rotate(2deg);
}

.mouth {
  position: absolute;
  height: 5.4vmin;
  width: 10vmin;
  background-color: #b982a2;
  border-radius: 46% 46% 46% 46%;
  border: 0.4vmin solid #040202;
  left: 18%;
  top: 24%;
  z-index: 2;
}

.mouth-shine {
  position: absolute;
  height: 4vmin;
  width: 7.8vmin;
  background-color: #e5b6d3;
  border-radius: 50%;
  left: 21%;
  top: 26%;
  z-index: 3;
  filter: blur(0.26vmin);
}

.mouth-shine2 {
  position: absolute;
  height: 1.2vmin;
  width: 2.3vmin;
  background-color: #f4e4f0;
  border-radius: 50%;
  transform: rotate(-8deg);
  left: 25%;
  top: 27%;
  z-index: 4;
  filter: blur(0.2vmin);
}

.soil{
  position: absolute;
  width: 10.4vmin;
  height: 10.4vmin;
  background-color: #828388;
  border-radius: 50% 50% 0 0;
  transform: translate(70%, -55%);
  filter: 
      drop-shadow(0 0.26vmin black)
      drop-shadow(0 -0.26vmin black)
      drop-shadow(0.26vmin 0 black)
      drop-shadow(-0.26vmin 0 black);
  color: #828388;
  box-shadow: 
      -7.8vmin 1.3vmin 0 -2.6vmin,
      -15.6vmin 1.3vmin 0 -1.3vmin,
      9.1vmin 1.6vmin 0 -2.3vmin, 
      15.6vmin 1.6vmin 0 -1.6vmin,
      -23.4vmin 1.6vmin 0 -1.6vmin,
      23.4vmin 1.6vmin 0 -1.6vmin;
  z-index: 6; 
}

内容的提问来源于stack exchange，提问作者Juan Velazco