<!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刪除。