字体跟随页面大小而变化效果完成代码
发布时间：2022-02-11 10:38:48 所属栏目：经验 来源：互联网
导读：这篇文章主要为大家详细介绍了字体跟随页面大小而变化效果实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。 昨天群里网友：小豌豆的幸福生活 咨询361源码问：字体跟随页面大小而变化如何实现呢？361源码小编
|
这篇文章主要为大家详细介绍了字体跟随页面大小而变化效果实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。 昨天群里网友：小豌豆的幸福生活 咨询361源码问：字体跟随页面大小而变化如何实现呢？361源码小编今天抽了点时间直接把代码分享给大家。效果如下： 字体跟随页面大小而变化实现代码如下： <!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> 大家可以直接复制使用。 （编辑：东莞站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
