字体跟随页面大小而变化效果实现代码

2020-07-03 13:00:08

字体：大中小

来源：转载

供稿：网友

这篇文章主要为大家详细介绍了字体跟随页面大小而变化效果实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

昨天群里网友：小豌豆的幸福生活咨询361源码问：字体跟随页面大小而变化如何实现呢？361源码小编今天抽了点时间直接把代码分享给大家。效果如下：

QQ截图20180104083317.jpg

点击查看效果

字体跟随页面大小而变化实现代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>字体跟随页面大小而变化（rem）</title><style>*{ margin: 0px; padding: 0px;}html {font-size: 75%;/*12 ÷ 16 × 100% = 75%*/}body {font-size: 1.4rem;/*1.4 × 12px = 16.8px */}body {margin:0 auto;min-width:320px;max-width:640px;font-family:"Microsoft YaHei",Arial,"Helvetica";background:#f2f2f2;color:#333;}h1,h2{ transition: all 0.3s linear; width: 100%; height: 100px;}h1{ font-size:1.5rem; background:red;}h2{ font-size:1.2rem; background: blue;}</style></head><script>    var width = document.querySelector('html').offsetWidth;    var delta =  (640-320) / (20-10);    var fontSize = (width - 320) / delta + 10;    if(width <= 320){        fontSize = 10;    }else if(width >=640){        fontSize = 20;    }    document.querySelector('html').style.fontSize = fontSize+'px';    window.addEventListener('resize',function(){        var width = document.querySelector('html').offsetWidth;        var delta =  (640-320) / (20-10);        var fontSize = (width - 320) / delta + 10;        if(width <= 320){            fontSize = 10;        }else if(width >=640){            fontSize = 20;        }        document.querySelector('html').style.fontSize = fontSize+'px';    })</script><body><h1>h1这行字是50px</h1><h2>h2-这行是20px</div></body></html>

大家可以直接复制使用

以上就是字体跟随页面大小而变化效果实现代码的全部内容，希望对大家的学习和解决疑问有所帮助，也希望大家多多支持错新网。

上一篇：80端口被占用解决办法

下一篇：5个致命错误会毁掉你的网页创业设计需谨记