字体大小跟随浏览器变动，html字体跟随浏览器大小变动，jquery设置字体自动大小
直接贴代码吧，这里需要引入jQuery插件
然后这里写￥.fn.fontFlex实现字体自动大小调整
可以把￥.fn.fontFlex这个函数直接放到jQuery里面去，这样就可以共用了
也可以去下载官方的jQuery.fontFlex.js
https://github.com/nathco/jQuery.fontFlex
DOCTYPE html>
<html><head><meta charset="UTF-8"><title>title>head><style>body{text-align: center;}style><body><div class="title">标题1div><div class="title2">标题2div><div class="title3">标题3div>body><script type="text/javascript" src="js/jquery-1.8.0.min.js">script><script>/*** 字体跟随浏览器变动大小* @param min 字体最小px* @param max 字体最大px* @param mid 变动分辨率，越大越细化*/$.fn.fontFlex = function(min, max, mid) {var $this = this;$(window).resize(function() {var size = window.innerWidth / mid;size = size < min ? min : size;size = size > max ? max : size;/*if(size < min) {size = min}if(size > max) {size = max}*/$this.css('font-size', size + 'px');}).trigger('resize');};$('.title').fontFlex(12, 60, 40);$('.title2').fontFlex(12, 40, 60);$('.title3').fontFlex(12, 25, 80);/*自定义参数min 最小 font-size 以像素为单位max 最大 font-size 以像素为单位(默认显示)mid mid范围缓冲区从 60到 70的值产生最佳结果。 较低的值产生较大的初始 font-size，而较高的值产生相反的值。 根据需求调整相应的调整。浏览器支持Google Chrome- Safari ( 桌面和移动)- IE ( 8，9，10 + )Firefox*//*** 盒子跟随浏览器变动大小*/$(window).resize(function() {var w = window.innerWidth*320/1920;// 这里计算浏览器宽度1920盒子默认大小320$(".box").css({'width':parseInt(w)+'px',"height":parseInt(w)+'px'});})script>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！