Javascript 批量调整页面上元素的大小

我想添加一个弹出的侧菜单，占屏幕宽度的30%。我还希望当前页面上的所有元素保持正确位置，但自动缩小以适应屏幕不动产损失（假设所有内容都使用视口宽度调整大小，即

vw

）

我如何通过jQuery大规模调整页面上的每个元素的大小——甚至只是构建一个目标元素数组？（如果jQuery的性能不理想，我会对另一种方法感兴趣，尤其是CSS。）

不寻求深入的例子。只有一个包含文本和图像（

、和

）

---

为清晰起见进行编辑：我将如何大量捕获页面上每个元素的大小，然后同时将所有元素的大小减少30%？我很好奇，是否有人在这样的事情上取得了成功，以及绩效的影响是什么。很明显，我认为这是不好的，但在轻薄的页面（即登录站点）上，这可能是可以忍受的。我感兴趣的是查看其他人的代码，并在jsperf等平台上运行它。

这是suuuper quick and dirty：

$('h1, p, img').each(function(){
    $(this).width($(this).width() * .7);
    $(this).height($(this).height() * .7);
    $(this).css('font-size', '70%');
});

当然，jQuery选择器可以包括您想要的任何元素类型。我加入了字体大小位，因为我在其他方面使用的

标记基本保持不变！您也可以这样做：

$('*').each(function(){
    $(this).width($(this).width() * .7);
    $(this).height($(this).height() * .7);
    $(this).css('font-size', '70%');
});

…但它使字体看起来很小。OTOH，保留字体大小行意味着和以前一样，它实际上根本不会改变

---

但也许这就足够让你开始了

我认为目前最简单的方法是使用变换；某种容器上的刻度（0.7）。容器的所有子容器将自动缩放

.container{
位置：绝对位置；
左：30%；
顶部：0px；
背景颜色：浅蓝色；
变换：比例（0.7）；
变换原点：左上角；
}
.侧边栏{
宽度：30%；
背景颜色：黄色；
}

测试1

边栏

有趣，不知道

$（'*'）

。我认为通过做宽度和高度，可以将元素缩小两倍。此外，字体大小不适用于视口单位（至少在不进一步调整的情况下是如此，因为jQuery返回字体大小的像素值）。现在。。。那么当你关闭菜单时呢？我想只是为了确保，你可以做.css（'max-width'，$（this）.width（）*.7）；。。。这应该是成比例的。至于关闭菜单，我认为您应该能够做相反的操作-.css（'max-width'，$（this.css（'max-width'）/.7）？至少数学算出来了。如果您需要附加单位，显然您将进行一些替换。。。