错误案例
一次偶然的机会在抖音上刷到了aspect-ratio的css属性，就觉得这个css简直太爽了，正好跟我现在的项目有一个需求吻合，第二天我悄悄把aspect-ratio给安排上了，用起来是真的爽，然后噩梦就来了😈。
在测试阶段，在低版本浏览器上，就败得一塌糊涂，页面的宽高直接就乱了，完全不符合需求，一问才知道，原来是在搜狗浏览器上看的，吓得我赶紧改成其他方案。所以，就算现在CSS更新了很多新的属性，可以方便我们写更多的样式，但是还是需要注意浏览器兼容问题，以免出现类似的问题
aspect-ratio例子
说回aspect-ratio这个属性，这个属性就是保持宽高比
举个简单的例子🌰
在这个卡片中，我们需要再红色框的这个盒子保持正方形，且这个整个盒子的宽高是不定的，宽度根据屏幕的宽度而定。
YaSol前期是比较傻的办法，就是就是通过js来获取红框的宽度，然后再通过js动态设置红款的高度，这样就能保证红框是正方形的。这个办法也不行不行，只是当我看到了aspect-ratio后，直接用一个CSS样式就能搞定，非常的方便
如果使用aspect-ratio的话，只需要在红框这个盒子上加上下面的CSS样式就能达到相同的效果
.box{
aspect-ratio:1/1
}
当然我们可以举一反三，如果说是1/1就说明宽高比例1:1，如果我们需要保持宽度是高度的两倍的话，那我们只需要把1/1改成2/1即可实现宽是高的两倍
aspect-ratio解决兼容问题
今天因为遇到了这类兼容性问题，所以也就没有在项目中使用aspect-ratio，我也是去搜了一下，发现了一个解决方案，测试了一下还行，可以用。
就是利用position和padding来达到这类效果，还是用上面的那个例子🌰来说。
我们在红框外包一层class为parent的div盒子，然后给他设置为相对定位，并且设置padding-top的值，下面是宽高比对应的padding-top值
tips:感觉这个还是需要根据项目而定，反正YaSol在使用1/1宽高比的时候发现使用100%的padding-top并不能保证1/1,所以padding-top值可以自己根据情况而上下浮动
| 宽高比 | padding-top值 |
|---|---|
| 1/1 | 100% |
| 4:3 | 75% |
| 3:2 | 66.67% |
| 16:9 | 56.25% |
案例
html
<span id="metric">width: 200px</span>
<input id="input" type="range" min="100" max="500" step="5" value="200">
<div class="container">
<div id="box">aspect-ratio</div>
<div id="box2">
<div class="parent">
<div class="padding_box">padding-top</div>
</div>
</div>
</div>
css
.container{
display: flex;
}
#box {
border: 1px solid black;
width: 200px;
background: yellow;
aspect-ratio: 1/1;
}
#box2{
width: 200px;
}
.parent{
position:relative;
width:100%;
padding-top:100%;
overflow: hidden;
}
.parent .padding_box{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
background:green;
}
js
const input = document.getElementById("input")
const metric = document.getElementById("metric")
const box = document.getElementById("box")
const box2 = document.getElementById("box2")
input.addEventListener("change", (e) => {
let spanText = `width: ${e.target.value}px`
metric.innerHTML = spanText
box.style.width = `${e.target.value}px`
box2.style.width = `${e.target.value}px`
})
执行效果如下：
总结
aspect-ratio好用简单，一个CSS样式搞定，但是兼容性差，如果有低版本低内核浏览器兼容需求，那么记得用之前先查看一下CSS属性的兼容性。
当然也许有更好更简单的办法实现，欢迎👏🏻大家一起讨论学习交流
