調整格但保持尺寸

我想<div>作出反應和適應屏幕窗口的大小。 <div>應該具有2：3的尺寸以便高度爲3：3，寬度爲2：3。通過編寫width: 200px;和height:300px;可以很容易地在css中創建它。調整格但保持尺寸

的事情是，我想要的<div>的高度取決於屏幕尺寸調整。我也想讓它裏面的文字重新調整大小。我知道這是可能的JavaScript或jQuery，但我真的不知道如何。像服用的高度，它一分爲三，然後兩三次，然後進行.css({'width',newWidth});

它應該是關於與它內部的文本同樣的事情。

我找到了正確的方式做到這一點。我不得不改變一點，但現在起作用了。

$(window).resize(function() { 
var ratio = 0.6; 
$('#hovsa').width($(window).height() * ratio).height($(window).height()); 
// instead of directly using "$(window).width() * ratio", you can call a method to 
// calculate width and height each time window is resized. 
})

我已經改變了寬度爲高*比和它的工作非常出色。我現在唯一需要做的就是讓字體大小也一樣。

來源

2012-03-26 Philip

設置與'高度一個div ：只要你對它的所有容器（包括'body'和'html'）做了相同的處理，屏幕的100％是微不足道的。這是你想要的東西嗎？ – Blazemonger 2012-03-26 15:11:50

正如我從你的描述中可以看到的，你已經知道如何在javascript/jQuery中做到這一點。所以，一開始就這樣，當你遇到問題時，我相信我們可以幫助你。 – 2012-03-26 15:13:32

如前所述，如果您希望的尺寸總是相同，則最好使用百分比值。

但是，在其他情況下，如果您需要爲您的DIV，或計算一個固定的大小，你可以聽的窗口大小調整事件，做你的CSS修改：

$(window).resize(function() { 
    var ratio = 0.8; 
    $('#divId').width($(window).width() * ratio).height($(window).height() * ratio); 
    // instead of directly using "$(window).width() * ratio", you can call a method to 
    // calculate width and height each time window is resized. 
})

來源

2012-03-26 15:41:36 Mordhak

我認爲讓這些「調整大小」的最佳方法是僅使用相對值（例如百分比，em），這樣您就可以保持相同的外觀&感受您的Web應用程序。

如果要使用固定值的像素一樣，你可以創建不同的.css文件，並使用那些依賴於客戶端的屏幕分辨率，但它意味着大量的工作，它可能不值得。

希望得到這個幫助。

艾默裏克。

來源

2012-03-26 15:30:53 Aymeric

繼承人使用jQuery的Javascript的方法，會做你想要的大小調整。

function resize(divToResizeId, newHeight) { 
    var divToResize = $("#" + divToResizeId); 
    var resizeRatio = newHeight/divToResize.height(); 

    var currentFontSize = divToResize.css('font-size'); 
    var currentFontSizeNum = parseFloat(currentFontSize, 10); 
    var newFontSize = currentFontSizeNum * resizeRatio; 

    divToResize.height(newHeight); 
    divtoResize.width(divtoResize.width() * resizeRatio); 
    divToResize.css('font-size', newFontSize); 
}

來源

2012-03-26 15:34:20 Zwik

調整格但保持尺寸

回答

相關問題