纯css实现div高度等于自适应宽度的一半

1、使用vw（vh）单位
vw： viewpoint width，视窗宽度，1vw=视窗宽度的1%
vh: viewpoint height，视窗高度，1vh=视窗高度的1%
长度单位 Chrome IE Firefox Safari Opera
浏览器支持
下表中的数字表示支持该长度单位的最低浏览器版本。

长度单位	Chrome	IE	Firefox	Safari	Opera
vh, vw	20.0	9.0	19.0	6.0	20.0

div {
width: 50vw;
height: 25vw;
background:yellow;
}

2、使用css函数calc() var()
浏览器版本问题
下表中的数字表示支持该长度单位的最低浏览器版本。

函数	Chrome	IE	Firefox	Safari	Opera
calc()	26.0 19.0 -webkit-	9.0	16.0 4.0 -moz-	7.0 6.0 -webkit-	15.0

:root{
–my-width:200px;
–my-height:calc(var(–my-width) / 2)
}

div{
width:var(–my-width);
height:var(–my-height);
background:yellow;
}

–my-width目前不能用%单位