具有可变列的Div响应比率

Question

我正在尝试使用响应式div（16/9）实现3列布局，并且在较小的屏幕上进行此2列或单列布局。

问题是根据divs的宽度猜测db的填充，以百分比表示。这可能吗？

在jsfiddle上测试，这样你就可以调整body的大小以查看不同列的行为：https://jsfiddle.net/cLr010kz/6/

＆＃13;

＆＃13;

body{
  margin:0;
}
.wrap{
  max-width:960px;
}
.a{
    position:relative;
	top:0;
	left:0;
	width:100%;
	float:left;
	padding-bottom: 47%;
	overflow:hidden;
	cursor: pointer;
  background:red;
}
.a:nth-child(1){
   background:blue;
}
.a:nth-child(2){
   background:green;
}
@media (min-width: 500px) { 
	.a{
		width: 50%;
		padding-bottom: 27%;
	}
}
@media (min-width: 700px) { 
	.a{
		width: 33.3333333%;
		padding-bottom: 19%;
	}
}

＆＃13;

<div class="wrap">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>

＆＃13;

＆＃13;

＆＃13;