首页 » WEB前端 » 正文

根据窗口大小,自动缩放文字大小

yibin 2018年04月13日 WEB前端 2011 views 0

扫一扫用手机浏览

引用Jquery.min.js及以下JS代码

将以下代码保存为fontFlex.js

(function($) {
    $.fn.fontFlex = function(min, max, mid) {
        var $this = this;
        $(window).resize(function() {
            var size = window.innerWidth / mid;
            if (size < min) size = min;
            if (size > max) size = max;
            $this.css('font-size', size + 'px');
        }).trigger('resize');
    };
})(jQuery);



html应用:

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/fontFlex.js"></script>
<script type="text/javascript">
    $(function() {$('.text').fontFlex(20, 60, 40);});	
</script>
</head>


<body>
 <dvi class="text">
 <p>荷花是我国十大名花之一,为多年水生植物,可分为藕莲、子莲和花莲三大系统。 它“出淤泥而不染,濯清涟而不妖”。</P>
 <p>在人们心中,荷花是高尚纯洁的象征。那么荷花、荷叶为什么能“出淤泥而不染”呢?原来,在它们的外表层布满了蜡质, 而且有许多乳头状的突起, 
突起之间充满着空气,挡着污泥浊水的渗入。</p>
 </div>
</body>
</html>


赞(4 打赏
  • 微信
  • 支付宝
  • QQ钱包

感谢您对优美的支持!

非特殊说明,本文由优美尚品主题原创或收集发布,欢迎转载

转载请注明本文地址:http://umhtml.com/web/45.html

发表评论

综合淘客版更新提示

优美淘客综合版已经更新至【V1.6】版

商品、商户详情页新增商品封面图轮播功能;

新增商户入驻功能,商家可以在线投稿申请入驻,主题配置中可以设置编辑器模式,申请投稿的分类,免审核的会员等级等。


已购买的用户可以联系我
获得最新更新包或直接在应用中心更新
需要购买的可联系我咨询购买

即日起至11月20日购买价值100元以上主题
送弹窗运营插件

查看演示购买或更新