应用场景

实现一个三角形

<!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>三角形</title>
  <style>
    div{
      width: 0;
      height: 0;
    }
    .a{
      border-top: 50px solid red;
      border-right: 50px solid transparent;
      border-left: 50px solid transparent;
    }
    .b{
      border-bottom: 50px solid red;
      border-right: 50px solid transparent;
      border-left: 50px solid transparent;
    }
    .c{
      border-top: 50px solid transparent;
      border-bottom: 50px solid transparent;
      border-left: 50px solid red;
    }
    .d{
      border-top: 50px solid transparent;
      border-right: 50px solid red;
      border-bottom: 50px solid transparent;
    }
    .e{
      border-top: 50px solid red;
      border-right: 50px solid transparent;
    }
  </style>
</head>
<body>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>
  <div class="e"></div>
</body>
</html>

实现一个扇形

<!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>扇形</title>
  <style>
    div{
      width: 0;
      height: 0;
    }
    .a{
      border: 100px solid transparent;
      border-radius: 100px;
      border-top-color: red;
    }
  </style>
</head>
<body>
  <div class="a"></div>
</body>
</html>

实现一个宽高自适应的正方形

<!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>正方形</title>
  <style>
    .a{
      width: 10%;
      height: 10vw;
      background: tomato;
    }
    .b{
      width: 10%;
      height: 0;
      padding-top: 10%;
      background-color: antiquewhite;
    }
    .c{
      width: 10%;
      overflow: hidden;
      background-color: bisque;
    }
    .c::after{
      content: '';
      display: block;
      margin-top: 100%;
    }
  </style>
</head>
<body>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</body>
</html>

画一条0.5px的线

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 设置meta，仅限移动端 -->
  <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5">
  <title>0.5px</title>
  <style>
    .a{
      width: 100px;
      height: 1px;
      background-color: black;
      transform: scale(1,0.5);
    }
  </style>
</head>
<body>
  <div class="a"></div>
</body>
</html>

设置小于12px的字体

<!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>12px</title>
  <style>
    div{
      font-size: 12px;
      transform: scale(0.75);
    }
  </style>
</head>
<body>
  <div>
    小于12px
  </div>
</body>
</html>

如何解决 1px 问题？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta id="metaEl" name="viewport" content="width=device-width, initial-scale=1.0">
  <title>1px</title>
  <style>
    div{
      width: 100px;
      height: 1px;
      background-color: black;
    }
  </style>
</head>
<body>
  <div></div>
  <script>
    const scale = 1 / window.devicePixelRatio;
    const metaEl = document.getElementById('metaEl');
    metaEl.setAttribute('content',`width=device-width,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`)
  </script>
</body>
</html>

1px问题就是在一些移动端页面上1px会变得很粗，原因时css中的1px并不能和移动设备上的1px划等号，它们之间的比例关系有一个专门的属性来描述。
window.devicePixelRatio = 设备的物理像素 / css像素