我可以在纯CSS而不是使用jQuery中执行此操作吗？
目前，我在window resize事件中使用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中执行此操作以获得更好的性能吗？ 怎么样？
您可以尝试使用calc() ，但支持不是很好 （仅限于IE9 +，FF4 +，Safari 6，Chrome 19+和Firefox for Android）。
测试： http ： //dabblet.com/gist/3609183
没有看到您的HTML或CSS，我无法给出明确的答案，但如果您需要页面的元素对正在resize的浏览器窗口做出反应，那么最佳解决方案是使用％widths，结合min-width和max-width设置具体尺寸限制。
你可以尝试缓存你的jQuery选择器，提高性能：
var gr1 = $('.gr1'); var gr2 = $('.gr2'); var box1 = $('.box1'); var box2 = $('.box2'); $(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");
您可以使用响应式CSS
查看此链接并编写媒体查询
http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
http://line25.com/tutorials/create-a-responsive-web-design-with-media-queries
媒体查询可能是要走的路，虽然它取决于你对“纯”CSS的定义，因为媒体查询是CSS3的新function，并且在IE 6/7/8中无法完全运行 。
如果您不知道，他们只根据屏幕/设备的当前分辨率应用某些样式。 您可以看到一个示例 ，调整窗口大小并查看内容如何更改？
这被称为响应式网页设计