保持两列css3之间的宽度比

Question

我想使用媒体查询来制作响应式网站。我有一些页面有2列，其他页面有3或4.

例如，我有两列：#colA和#colB。 #colA的宽度为600px，#colB的宽度为360px，宽度为960px。

我想使用媒体查询，这样如果包装器的小于960px，列将保持它们之间的宽度比例（这应该将#colA＆＃39; s 600px转换为62.5％，＃colB＆＃39; s 360px宽度为37.5％..

有没有办法用html / css做到这一点？如果不是用于媒体查询的其他（最简单/最轻）选项是什么？

<div id="colA" width="600px">content1</div>
<div id="colB" width="360px">content2</div>

转换

<div id="colA" width="62.5%">content1</div>
<div id="colB" width="37.5%">content2</div>

使用css / html？

Edit1：是的，它是CMS。用户通过拖动控制面板中的某些滑块来设置px中的宽度值。我需要使模板具有响应性，因此当包装器的宽度小于960px时，列仍将保持它们之间的宽度比例。

Answer 1

您的媒体查询应该如下所示，只需确保此代码位于以前为#colA和#colB分配的样式之下

@media screen and (max-width: 959px) { 
   #colA{ width:62.5%; }
   #colB{ width:37.5%; }
}

Answer 2

我认为最简单的方法就是你的问题陈述。只需使用百分比。

#colA {
    width: 62.5%;
}

依旧......