Question

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

我想在缩放浏览器时存档类似于此网站的结果，图像，方框，字体大小也会缩放 - 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 );

            });

        });

demo

我尝试使用此插件，但无法使其完全正常工作 - http://fittextjs.com/

有什么想法吗？

Answer 1

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

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

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

Answer 2

请注意，它只运行一次。这是因为在准备好文档时，您将为window_height提供值。这个值不会改变。

因此，第一次运行函数时，它会使用您计算的高度为框添加动画效果。凉。我们看到了变化。下一次，window_height仍然具有相同的值，因此当函数运行时，您将获得相同的数字，因此框的大小调整为与已有的相同。

实际上，你的功能工作正常，只是你每次都要将盒子调整到相同的大小。

Answer 3

我使用了以下代码：你必须自己玩它，你需要一个计时器或者在某些浏览器中注意：

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

Answer 4

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

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

如何在窗口大小调整大小的框，字体大小或图像大小？

4 个答案: