<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box {
width: 100%;
}
#content {
display: inline-block;
width: 100%;
}
</style>
</head>
<body>
<div id="box">
<p id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque blanditiis consequatur dicta et hic laborum, minus molestiae perspiciatis placeat quam quia quo recusandae reiciendis sapiente sequi tempore tenetur voluptatibus? Praesentium!
</p>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
$.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');
console.log(window.innerWidth);
}).trigger('resize');
};
$('#content').fontFlex(20,60,40)
</script>
</body>
</html>
jq的resize()事件 ，检测浏览器窗口的重置（改变）
trigger()触发某个事件
在最小font-size和最大font-size之间改变浏览器窗口大小实现fs自适应。
文字随着浏览器窗口大小改变而改变(自适应?)
免责声明！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。