resize div及其在瀏覽器窗口上的內容調整大小

Question

當瀏覽器窗口調整大小時，是否可以自動調整div及其內容的大小？ 我希望文字不要換行。我想調整圖像和字體大小以具有相同的組成（或佈局）。 是否可以使用CSS來完成？ 謝謝 馬丁

Answer 1

我一直想改變相對圖像大小父DIV和窗口大小的比例。我已經使用下面的代碼。問題是，圖像寬度調整正確，但在我的情況下，高度除以13而不是3.9。你能看到錯誤嗎？感謝

var height = window.innerHeight; 
    var width = window.innerWidth; 

    var pic = document.getElementById('picture'); 
    var snimek = pic.childNodes[0]; 

    var heightRatio = snimek.clientHeight/height; 
    var widthRatio = snimek.clientWidth/width; 

    console.log(widthRatio +' x '+heightRatio); 

    for(i = 0; i < snimek.childNodes.length; i ++) 
    { 
     if(snimek.childNodes[i].tagName == 'IMG') { 

      if(widthRatio > 1 || heightRatio > 1) { 
       console.log(snimek.childNodes[i].width + 'x' + snimek.childNodes[i].height); 
       if(widthRatio > heightRatio) 
       { 
        snimek.childNodes[i].width /= widthRatio; 
        snimek.childNodes[i].height /= widthRatio; 
       } 
       else 
       { 
        snimek.childNodes[i].width /= heightRatio; 
        snimek.childNodes[i].height /= heightRatio; 
       } 
       console.log(snimek.childNodes[i].width + 'x' + snimek.childNodes[i].height); 
      } 
     } 
    } 

Answer 2

CSS只提供有限的（半）事件，但是，您可能能夠使用寬度或方向媒體查詢來根據窗口的寬度應用不同的樣式。

因此，對於一些瀏覽器，你可以使用：

@media all and (orientation:portrait) { 
    body { color: red; } 
} 

這將繪製所有文本顯示爲紅色，當窗口寬度小於其高度。

更準確的說，你可以使用寬度：

@media all and (max-width:800px) { 
    body { color: red; } 
} 

這將繪製文本紅色當窗口小於800像素寬。嘗試調整大小this page以查看效果。

更準確地說需要javascript。

Answer 3

你可以使用jquery的resize方法。 和u可以把這樣的事情...

$(window).resize(function() { 
    if($(window).width() == 800) // u can choose the size of the window also. 
      $("any particular div").css("font-size":"14px"); 
}); 

，這樣你們可以添加改變字體大小或任何圖像高度或什麼... 和如果你不希望使用jquery然後ü可以檢查從下面的鏈接， WINDOW SIZE

但是從我的角度來看ü應使用Jquery ......

Answer 4

我認爲下面的解決辦法是不斷調整的對象是非常有用的 - 這僅僅是一個例子：

CSS：

.scale 
{ 
    font-size: calc(1vw + 1vh); 
    width: calc(10vw + 10vh); 
    height: calc(5vw + 5vh); 
    padding: calc(1vw + 1vh); 
    background-color: yellow; 
} 

HTML：

<div class="scale"> 
Resize container to resize me! 
</div> 

FIDDLE ：https://jsfiddle.net/uxj77rg1/