缩放文本和宽度

我试图让我的文字来调整基于浏览器的大小，当用户改变浏览器的高度意味着，该文本将变得更小或更大，此外，如果用户改变宽度，然后文本再次变得更小或更大。缩放文本和宽度

我有jQuery的这一点，但我很新的这一点，我不知道如何去改变它。我也在这里附上了一个小提琴。

和下面的代码：

jQuery(document).ready(function($) { 
     var $body = $('body'); //Cache this for performance 

     var setBodyScale = function() { 
      var scaleFactor = 0.55, 
       scaleSource = $(window).height(), 
       maxScale = 600, 
       minScale = 10; 

      var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor: 

      if (fontSize > maxScale) fontSize = maxScale; 
      if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums 

      $('body').css('font-size', fontSize + '%'); 
     } 

     $(window).resize(function(){ 
      setBodyScale(); 
     }); 

     //Fire it when the page first loads: 
     setBodyScale(); 
    });

来源

2013-11-21 Dan

从你写的是什么时，浏览器窗口高度的大小，但你没有任何添加到测试中的文本调整罚款浏览器宽度。请参阅本更新fiddle

我从您的修正线：

scaleSource = $(window).height(),

到

scaleSource = ($(window).height()/2) + ($(window).width()/2),

我假定你的规模，但你的想法。

来源

2013-11-21 17:32:27 dev

这是完美的工作，你知道为什么我不能改变字体大小，虽然为文本1和文本2应该是不同的大小？ – Dan

是的，很简单，你已经用连字符添加了'font size'而不是'font-size'。请参阅更新小提琴 - > http://jsfiddle.net/6FUHp/3/ – dev

并使用'em'而不是'px' ...另一个更新的小提琴 - > http://jsfiddle.net/6FUHp/4/ – dev

缩放文本和宽度

回答

相关问题