【前端】动态改变网页字体大小

原创于 2020-12-02 22:58:37 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html5

前端专栏收录该内容

6 篇文章

订阅专栏

博客介绍了获取设备宽度，以20号字体、320设备宽度为基准进行比例计算，基准值可按需定义，同时要监听页面加载和窗口大小改变，涉及前端页面适配相关信息技术内容。

var c = () => {
    let w = document.documentElement.clientWidth;
    let n = (20*(w/320)>40?40+'px':(20*(w/320)+"px"));
    document.documentElement.style.fontSize=n;
}
window.addEventListener("load", c);
window.addEventListener("resize", c);

首先获取设备的宽度。以20号字体大小为基准，320设备宽度为基准，进行一个比例计算。基准值可以依据自身要求或者项目需求定义。

监听页面加载和窗口大小改变。