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

Question

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

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

不寻求深入的例子。只有一张有文字和图片 (<h1>, <p>, and <img>)。

为清楚起见进行编辑：我将如何大量捕获页面上每个元素的大小，然后同时将所有元素减少 30%？我很好奇是否有人在这样的事情上取得了成功，以及对性能的影响是什么。我显然预计它会很糟糕，但在轻量级页面（即登陆站点）上它可能是可以容忍的。我有兴趣查看其他人的代码并运行通过它在 jsperf 等方面的步伐

Answer 1

这 suuuuper 又快又脏：

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

当然，jQuery 选择器可以包含您想要的任何元素类型。我包含了 font-size 位，因为我使用的 <p> 标签几乎保持不变！您也可以这样做：

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

...但它使字体 suuuuper 变小了。 OTOH，离开 font-size 行意味着和以前一样，它实际上根本没有改变。

但这也许足以让您开始！

Answer 2

我认为到目前为止最简单的方法是使用转换； scale(0.7) 在某种容器上。容器的所有子项都会自动缩放。

.container {
  position: absolute;
  left: 30%;
  top: 0px;
  background-color: lightblue;
  transform: scale(0.7);
  transform-origin: top left;
}

.sidebar {
    width: 30%;
  background-color: yellow;
}

<div class="container">
  <p>TEST 1</p>
  <img src="http://lorempixel.com/400/200/sports/1/">
</div>
<div class="sidebar">SIDEBAR
  </div>

您在 jQuery 中需要做的就是分配容器 class

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

Mass Resizing of Elements on Page

html

javascript

css

jquery

resize