サイズを変更してもサイズは保持する

Question

<div>は、画面のウィンドウサイズに反応してフィットします。 <div>は、高さが3：3、幅が2：3になるように2：3の寸法を持つと想定されています。 width: 200px;とheight:300px;と書くことで、CSSで作成するのは簡単です。

スクリーンサイズによっては、<div>の高さをリサイズしたいことです。また、その内部のテキストのサイズを変更する必要があります。私はそれがjavascriptまたはjQueryによって可能であることを知っていますが、私は本当にどのようにわからないのです。高さを取って3つに分け、次に2つに分けて作るようなもの.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. 
}) 

私は比* 高さに幅を変更した、それは非常によく働きました。私が今必要とするのは、フォントサイズを同じようにすることだけです。

Answer 1

前述のように、必要なサイズが常に同じ場合は、パーセント値を使用する方がよいでしょう。

しかし、あなたはdiv要素、または計算いずれかの固定サイズが必要な場合は、他のケースでは、あなたは、ウィンドウのサイズ変更イベントをリッスンし、あなたのCSSの変更を行うことができます： `高さのdivの設定

$(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）のみを使用して、同じ外観に保つことができると思います。&

ピクセルなどの固定値を使用する場合は、さまざまな.cssファイルを作成し、クライアントの画面解像度に応じてそれらを使用できますが、それは多くの作業を意味し、その価値はありません。

このヘルプが必要です。

ポリマー性。

Answer 3

Heresあなたが望むサイズ変更を行う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); 
}