Question

我想要一个<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.
})

我已将宽度更改为 height * ratio ，并且效果非常好。我现在唯一需要做的就是使字体大小也一样。

Answer 1

如前所述，如果您想要的尺寸始终相同，最好使用百分比值。

但是，在其他情况下，如果您需要一个固定大小的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.
})

Answer 2

我认为使这些“调整大小”的最佳方法是仅使用相对值（例如百分比，em），这样你就可以保持相同的外观＆amp;感觉您的网络应用程序。

如果你想使用像素这样的固定值，你可以创建不同的.css文件，并根据客户端屏幕分辨率使用这些文件，但它意味着很多工作而且不值得。

希望得到这个帮助。

艾默里克。

Answer 3

使用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);
}

调整div但保持尺寸

3 个答案: