CSS实现固定宽高比

使用vw/vh来实现

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度 vw相对于视窗的宽度，视窗宽度是100vw

对于iphone6/7 375*667的分辨率，那么px可以通过如下方式换算成vw：

1px = （1/375）*100 vw

CSS代码

div {
    width: 20vw;
    height: 40vw;
    background: pink;
}

html

<div></div>

使用百分比布局来实现

利用了padding-top的百分比是相对父盒子的。

#wrap {
    width: 60vw;
}
#son{
    width: 100%;
    height: 0;
    margin: 50px;
    padding-top: 75%;
    background-color: pink;
}

<div id="wrap">
    <div id="son">11111</div>
</div>