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

Implement a max-font-size style rule with CSS/javascript/jquery

本文关键字：一个 max-font-size 样式 规则 javascript CSS jquery 实现 使用      更新时间：2023-09-26

我使用下面的代码来动态调整文本的大小:

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

这对于向内拉浏览器很有效，但是当我在21英寸的iMac上拉伸屏幕时，文本对于我设置的DIV来说太大了。我怎样才能实现一个解决方案，即我可以封顶文本上的最大字体大小。我是否可以重写上面的这个函数，并将max-font-size设置为13px?

谢谢

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

您可以实现一个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
  }
}
相关文章：