通用 CSS

设置小于 12px 字体

如设置 10px 的字体大小，由于浏览器限制最小字体为 12px，可以先将字体设置成 20px，然后利用transform的scale属性缩小一半即 0.5 即可，由于缩小后位置会发生偏移，通过transform-origin重新设置元素的原点。

.font-size-10 {
  font-size: 20px;
  transform: scale(0.5);
  transform-origin: 0 0;
}

👇👇👇👇 显示效果如下:

我是 10px 大小的文字

我是 12px 大小的文字

元素等比宽高

width padding 大法

将 width 和 padding-top 设置成同一个值，宽高会成 1:1 比例，高度会有padding-top撑起来。

.demo-box {
  width: 100%;
  padding-top: 100%;
  /* width: 100px; */
  /* padding-top: 100px; */
}

.demo-box {
  width: 100%;
  padding-top: 50%;
  /* width: 100px; */
  /* padding-top: 50px; */
}

效果预览 👇 可以改变窗口试试！

aspect-ratio 大法

使用 Css 的属性aspect-ratio，设置相应的比例。

.demo-box {
  width: 100%;
  /* width: 100px; */
  aspect-ratio: 1 / 1;
}

.demo-box {
  width: 100%;
  /* width: 100px; */
  aspect-ratio: 2 / 1;
}

效果预览 👇 可以改变窗口试试！