javascript - 我可以用纯 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 类)

我可以在纯 CSS 中执行此操作以获得更好的性能吗？怎么办？

Answer 1

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