div#target { width: 80vw; height: 80vw }
添加一个伪元素，利用 padding-top: 100% 撑开容器实现等宽高。手机码字不便贴代码，具体可以参考我以前的一篇文章：
https://idiotwu.me/css-responsive-square/
我只是对贺老的答案做个资料补充的，并且只提供传送门，七个冷门单位
http://www.admin10000.com/document/5463.html
大致提供个思路，
就是通过红色div，来当个中介。
demo >> A Pen by Joy Youger
.
{
width: 80%;
padding-top: 80%;
height: 0%;
}
这个问题无论在 PC 还是移动端，都可以用纯 CSS 来实现..
就是 @Dolphin Wood 所说的方法，我再补充一点，利用
height + padding-top 可以得到一个
任意长宽比 的元素.
Responsive background images with fixed or fluid aspect ratios
这篇文章中介绍了此方法..可以详细看一下
贺老说的那种方法，新单位我没用过，查了下兼容性不是很好
补充一下, 利用 height 和 padding-top 可以实现
动态长宽比 (非固定长宽比)
你说的我并不明白~ 什么叫做js实现80%的宽度？你的意思是js来获取页面宽度，然后用js修改css的height值么？
搜索下响应式布局。
media query媒体查询！判断浏览器宽度，设置相应的属性！bootstrap建议你去看看CSS源码
