前言#

开发常见问题

padding-top/bottom方案#

父元素子元素嵌套，父元素是一个固定宽高的正方形，子元素的宽度为100%，高度为0，padding-top/bottom为百分比

.parent{
  width:500px;
  height:500px;
}
.child{
  width:100%;
  height:0;
  padding-top:66%;
}

子元素的padding-top/bottom百分比为纵横比

1/1=100% 1/2=50% 3/4=75% 9/16=56%

aspect-ratio#

aspect允许创建保持纵横比的容器

语法

aspect-ratio: auto || <ratio>

auto为默认值 ratio的写法为 <width/height>

  .parent{
    width:500px;
    aspect-ratio:3/4;
  }

vw/vh#

由于 vw,vh是相对于视窗的占比，可以在不同的屏幕下保持相通的宽高比

.parent{
  width:40vw;
  height:30vw;
}