我可以在纯CSS而不是使用jQuery中执行此操作吗？

Question

目前,我在窗口调整大小事件中使用jQuery设置一些元素的宽度和高度,基于window.innerWidth和window.innerHeight.

像这样的东西:

$(".gr1").css("height", (window.innerHeight - 150) + "px");

这些是其他一些例子:

$(".gr2").css("width", ((window.innerWidth / 2) - 12).toString() + "px");
$(".box1").css("height", ((window.innerHeight - 150) / 3 - 12).toString() + "px");
$(".box2").css("height", ((window.innerHeight - 150) / 2 - 12).toString() + "px");

这在Chrome 21(Windows)中变得有点慢,在iPad和Nexus 7平板电脑上渲染速度太慢.(由于存在与许多元素gr1,gr2,box1和box2类)

我可以在Pure CSS中执行此操作以提供更好的性能吗？怎么样？

Answer 1

没有看到您的HTML或CSS,我无法给出明确的答案,但如果您需要页面元素对正在调整大小的浏览器窗口作出反应,那么最好的解决方案是使用%widths,结合使用min-width和max-width设置具体的大小限制.