Массовое изменение размера элементов на странице

Question

Я хочу добавить боковое меню, которое появляется и занимает 30% ширины экрана. Мне также хотелось бы, чтобы все элементы, находящиеся на этой странице, находились правильно, но автоматически уменьшались, чтобы приспособиться к потере недвижимости на экране (скажем, все имеет размер, используя ширину окна просмотра, то есть vw).

Как я могу изменить размер каждого элемента на странице - или даже просто построить массив целевых объектов - через jQuery? (Если jQuery не идеален для производительности, меня бы интересовал другой подход, особенно CSS.)

Не ища углубленного примера. Только один с текстом и изображениями (<h1>, <p>, and <img>).

Редактирование для ясности: Как бы я сделал массовое захват размера каждого элемента на странице, а затем уменьшил их одновременно на 30%? Мне любопытно, имел ли кто-либо успех с чем-то подобным и какими были последствия. Я, очевидно, ожидаю, что это будет плохо, но на легких страницах (например, на местах посадки) это может быть приемлемым. Я заинтересован в том, чтобы код кто-то еще и запустить его через его шагов на JSPerf и т.д.

Answer 1

Я думаю, что самый простой способ сделать это - использовать преобразование; (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 является назначение класса контейнера

Answer 2

Это suuuuper быстрый и грязный:

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

селектор JQuery может включать в себя любые типы элементов вы хотите, конечно , Я включил бит размера шрифта, потому что теги <p>, которые я использовал, оставались практически такими же! Вы также можете сделать это:

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

... но это делает шрифт suuuuper teensy. OTOH, оставляя строку размера шрифта, означает, что, как и прежде, она вообще не изменяется.

Но, возможно, этого достаточно, чтобы дать вам начало!