Question

我想添加一个弹出的侧边菜单，占据屏幕宽度的30％。我还想让页面上当前所有元素保持正确定位，但要自动缩小以适应屏幕空间丢失（让我们说所有内容都是使用视口宽度调整大小，即{{1} }）。

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

不寻求深入的例子。只有一个文字和图片（vw）。

为了清晰起见编辑：我如何批量捕获页面上每个元素的大小，然后将所有元素同时减少30％？我很好奇是否有人在这样的事情上取得了成功，以及性能的影响是什么。我显然希望它很糟糕，但在轻型网页（即登陆网站）上它可能是可以容忍的。我有兴趣看到别人的代码，并在jsperf上运行它等等。

Answer 1

这是快速和肮脏的：

$('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 teensy。 OTOH，留下字体大小的线条意味着像以前一样，它实际上根本没有改变。

但也许这足以让你有个开始！

Answer 2

我认为到目前为止最简单的方法是使用转换;在某种容器上的比例（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中需要做的就是分配容器类

页面上元素的大规模调整

2 个答案: