頁面元素的大小調整頁面

上的元素大小調整我想添加一個彈出菜單，佔用屏幕寬度的30％。我還希望頁面上當前的所有元素保持正確定位，但是會自動縮小以適應屏幕的不動產損失（假設所有內容均使用視口寬度進行設置，即vw）。頁面元素的大小調整頁面

我怎麼能通過jQuery去調整頁面上的每個元素的大小 - 甚至只是建立一個目標數組？（如果jQuery對性能不理想，我會對另一種方法感興趣，特別是CSS。）

不尋求一個深入的例子。只有一個文本和圖像（<h1>, <p>, and <img>）。

編輯爲了清楚起見：我將如何去大規模捕獲頁面上每個元素的大小，然後同時減少30％的所有元素？我很好奇是否有人在這樣的事情上取得了成功，以及性能方面的影響。我顯然期望它不好，但在輕型頁面（即着陸點）上它可能是可以容忍的。我希望看到別人的代碼，並通過其上jsperf步伐運行它，等

來源

2016-01-03 daveycroqet

我認爲到目前爲止最簡單的方法是使用變換;規模（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做的是分配容器類

來源

2016-01-03 17:48:08 vals

這是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%'); 
});

...但它使字體suuuuperper teensy。 OTOH，將字體大小的字段放出意味着與以前一樣，它實際上並沒有改變。

但也許這足以給你一個開始！

來源

2016-01-03 06:39:57 jh42

有趣，不知道''$（ '*'）''。我認爲通過做寬度和高度，你收縮元素兩次。此外，字體大小不適用於視口單位（至少不會沒有更多的煩惱，因爲jQuery返回像素的字體大小的值）。現在......關閉菜單時怎麼辦？ – daveycroqet

我想只是爲了確保，你可以做.css（'max-width'，$（this）.width（）* .7）; ...應該按比例縮放。至於關閉菜單，我認爲你應該能夠做到相反 - .css（'max-width'，$（this）.css（'max-width'）/ .7）; ？至少，數學是可行的。如果你需要追加單位，顯然你會做一些替換...... – jh42

頁面元素的大小調整頁面

回答

相關問題