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

发布时间：2023-11-04 16:47:08 所属栏目：经验来源：

导读：小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

昨天群里网友：小豌豆的幸福生活咨询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>

大家可以直接复制使用

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!