изменить размер div, но сохранить размеры

Question

Я хочу <div>, который реагирует и соответствует размеру экрана. Предполагается, что размер <div> имеет размеры 2: 3. Высота 3: 3, а ширина - 2: 3. Достаточно легко сделать это в css, написав width: 200px; и height:300px;.

Дело в том, что я хочу, чтобы высота <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. 
}) 

Я изменил ширину, чтобы быть высота * отношение, и она работала очень хорошо. Единственное, что мне нужно сделать сейчас, это сделать так, чтобы fontsize.

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) таким образом, вы сможете сохранить одинаковый вид & для своего веб-приложения.

Если вы хотите использовать фиксированные значения, такие как пиксели, вы можете создавать разные .css-файлы и использовать их в зависимости от разрешения экрана клиента, но это требует большой работы, и это не стоило того.

Надеюсь, что эта помощь.

Aymeric.

Answer 3

Heres метод в Javascript, используя jQuery, который сделает нужный размер.

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