Question

目前，我根据window.innerWidth和window.innerHeight在窗口调整大小事件中使用jQuery设置某些元素的宽度和高度。

这样的事情：

$(".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，并结合{{1 }和min-width设置具体的大小限制。

Answer 2

你可以尝试缓存你的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");

Answer 3

您可以使用自适应css

查看此链接并编写媒体查询

http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

http://line25.com/tutorials/create-a-responsive-web-design-with-media-queries

Answer 4

您可以尝试使用calc()，但the support is not very good（限于IE9 +，FF4 +，Safari 6，Chrome 19+和Firefox for Android）。

测试：http://dabblet.com/gist/3609183

Answer 5

Media Queries可能是要走的路，虽然这取决于你对“纯”CSS的定义，因为媒体查询是CSS3的新功能，并且不起作用fully in IE 6/7/8。

如果您不知道，他们的工作方式是仅根据屏幕/设备的当前分辨率应用某些样式。您可以看到example，调整窗口大小并查看内容如何变化？

这称为responsive web design

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

5 个答案: