字体大小跟随浏览器变动，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">
标题1
</div>
<div class="title2">
标题2
</div>
<div class="title3">
标题3
</div>
</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>
类似资料：