CSS Div根据网络浏览器重新调整大小

Question

我的代码上有几个div，所有这些div都正确定位我想要的方式。唯一的问题是，当我缩小页面时，它们不会重新调整大小。我希望能够根据Web浏览器大小重新调整大小。我不知道该怎么做，我担心它可能搞砸了他们正确的顶级＆amp;左侧位置。我所有的div都被设置为绝对定位。

Answer 1

将其尺寸设置为百分比值而不是像素（我认为这是您正在使用的内容）

Answer 2

将所有div设置为百分比值。

或者

您可以使用＆＃39;媒体规则＆＃39; of css3：

@media screen and (max-width: 300px) { .div-a { background-color: lightblue; } }

Answer 3

你基本上有3个选项

1. Bootstrap（http://getbootstrap.com/）
2. 使用百分比值代替像素
3. 使用vh（视图高度）和vw（视图宽度）。这是一个例子：http://jsfiddle.net/7m55nur1/

请注意width: 75vw;将div宽度保持为Web浏览器的75％。与margin-left: 12.5vw相同，它使左边距保持在浏览器大小的12.5％。

Answer 4

我想通了，基本上我做了什么得到宽度（让我们说它的300像素）并找出页面宽度的百分比（在我的情况下是1900像素）。 结果将是15.789473684210526％ 把那个确切的值运用得很好！像像素一样准确。 我使用了这个工具：

http://www.onlineconversion.com/percentcalc.htm

感谢大家的回复！