Question

我正在使用此代码动态调整文本大小：

function fontResize(){
   $('.features').css('font-size', ($(window).width()/100) + 'px');
}

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

这对于向内拉浏览器非常有用，但是当我在21英寸iMac上拉伸屏幕时，文字对于我所拥有的固定尺寸DIV来说太大了。我怎么能实现一个解决方案，我可以限制文本上的最大字体大小。我能否覆盖上面的这个函数，并将最大字体大小设置为13px？

由于

Answer 1

function fontResize(){
   var size = $(window).width()/100;
   if ( size < 13 )
       $('.features').css('font-size', size + 'px');
}

Answer 2

您可以实现sizeRange来定义最大和最小字体大小。

function fontResize(){
  var sizeRange = [6, 13];  
  var size = $(window).width()/100;

  if ( size <= sizeRange[1] && size >= sizeRange[0] ) {
    $('.features').css('font-size', size + 'px');
  } else {
    // font-size out of range
  }
}

使用CSS / javascript / jquery实现max-font-size样式规则

2 个答案: