1

如何在窗口调整大小时调整框或字体大小？但是缩放比例却不超过css中设置的默认值，例如，在css中你可能width:800px; height:600px;对box进行了设置。

当您缩放浏览器时，我想存档与本网站类似的结果，图像、框、字体大小也在缩放 - http://davegamache.com/craftsmanship/

我测试了我的脚本，但似乎离它很远，

html,

<div class="box">

    <p>I am in a box.</p>

</div>

的CSS，

<style>
        .box {
            width:800px;
            height:600px;
            border:1px solid #000;
        }
    </style>

jQuery,

$(document).ready(function(){

            var window_height = $(window).height();

            $(window).resize(function() {

                //$('.box').css({'height':(window_height/2)+'px'});

                $(".box").animate({
                    width: (window_height/2) +'px'
                }, 500 );

            });

        });

演示

我尝试使用这个插件，但根本无法让它工作 - http://fittextjs.com/

有任何想法吗？

4

4 回答 4

1

您需要在 resize 函数中获取窗口高度，否则它永远不会改变：

$(function(){
    $(window).on('resize', function() {
        var H = $(window).height();
        $('.box').animate({width: (H/2) +'px'}, 500 );
    });
});

一个更简单的选择是在 CSS 中使用百分比/em 等，但对于更高级的东西，通常需要 JS。

于 2012-08-21T14:59:42.580 回答
1

请注意，它只工作一次。这是因为在准备好文档时，您正在为window_height. 这个值不会改变。

因此，您的函数第一次运行时，它会使用您计算的高度为框设置动画。凉爽的。我们看到了变化。下一次，你仍然有相同的值window_height，所以当函数运行时，你会得到相同的数字，所以盒子的大小被调整为与它原来的相同。

所以实际上，你的函数工作得很好，只是你每次都将盒子的大小调整为相同的大小。

于 2012-08-21T15:03:31.433 回答
0

我使用了以下代码：你必须自己玩它，你需要一个计时器，否则它会在某些浏览器中出现：

    $(document).ready(function() {
        var delay = (function(){
            var timer = 0;
            return function(callback, ms){
                clearTimeout (timer);
                timer = setTimeout(callback, ms);
                };
        })();

        $(window).bind('resize', function(){
            delay(function(){
                //resize code here will run every 100ms
                            //get window height/width as you did and animate
            }, 100);
        });
    });
于 2012-08-21T15:04:46.753 回答
0

你可以试试我很久以前做的这个功能：

function resizeAndKeepRatio(element, width, height, scale){
    centerHeight= $(window).height();
    centerWidth =  $(window).width();
    windowPixels = centerHeight+centerWidth;

    heightScale = height / scale;
    widthScale = width / scale;


    hoogteLogo= windowPixels / widthScale;
    //110 / 1024 * 100
    breedteLogo= windowPixels / heightScale;
    // 130 / 768 * 100
    $(element).css({"width":breedteLogo});
    $(element).css({"height":hoogteLogo});
}

resizeAndKeepRatio(".box",500,500,1.5); //  you need to play around with the scale
于 2012-08-21T15:13:07.560 回答