изменить размер div, но сохранить размеры - PullRequest
Новая
       2

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

0 голосов
/ 26 марта 2012

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

Дело в том, что я хочу, чтобы высота <div> изменялась в зависимости от размера экрана.А также я хочу, чтобы текст внутри него был изменен.Я знаю, что это возможно с помощью javascript или jQuery, но я действительно не знаю как.Что-то вроде взятия высоты и деления ее на три, а затем на два, а затем сделать .css({'width',newWidth});

И это должно быть примерно то же самое с текстом внутри него.

Iнашел правильный способ сделать это.Мне пришлось немного измениться, но теперь это работает. 

$(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.
})

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

Ответы [ 3 ]

3 голосов
/ 26 марта 2012

Как уже было сказано, лучше использовать процентные значения, если нужный размер всегда будет одинаковым.

Но в других случаях, если вам нужен фиксированный размер для вашего 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.
})
0 голосов
/ 26 марта 2012

Вот метод в 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);
}
0 голосов
/ 26 марта 2012

Я думаю, что лучший способ сделать это "изменение размера" - это использовать только относительные значения (например, в процентах, em), чтобы вы могли сохранять тот же внешний вид для вашего веб-приложения.

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

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

Aymeric.

...