vh, vw, vmin, vmax

HTML

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

CSS

#one {
    width: 50vmin;
    height: 50vmin;
    background-color: red;
    opacity: .5;
}

#two {
    width: 50vmax;
    height: 50vmax;
    background-color: green;
    opacity: .5;
}

#three {
    width: 50vw;
    height: 50vh;
    background-color: orange;
    opacity: .5;
}