调整格但保持尺寸

我想<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

调整格但保持尺寸

回答

相关问题