2

目前，我在窗口调整大小事件中使用 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 中执行此操作以提供更好的性能吗？如何？

4

4 回答 4

6

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

于 2012-09-03T12:51:29.917 回答
4

你可以尝试缓存你的 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");
于 2012-09-03T12:51:37.450 回答
3

您可以尝试使用calc()，但支持不是很好（仅限于 IE9+、FF4+、Safari 6、Chrome 19+ 和 Firefox for Android）。

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

于 2012-09-03T12:54:19.753 回答
2

媒体查询可能是要走的路，尽管这取决于您对“纯” CSS 的定义，因为媒体查询是 CSS3 的新内容，并且在 IE 6/7/8 中不能完全工作。

如果您不知道，它们仅通过基于屏幕/设备当前分辨率应用某些样式来工作。您可以查看示例，调整窗口大小并查看内容如何变化？

这被称为响应式网页设计

于 2012-09-03T12:52:41.370 回答