寻求替代vw的JavaScript字体大小自适应完整实现代码

没问题！我整理了一个完整的示例代码，用JavaScript来实现屏幕缩放时字体大小动态调整的效果，完美替代vw的适配能力，同时兼容性覆盖更多老旧浏览器和设备。

实现思路 #

核心逻辑是监听窗口的resize事件，根据当前屏幕宽度与预设的基准宽度（比如你的设计稿宽度）的比例，动态计算并设置字体大小。这里提供两种常见的实现方式：一种是调整根元素的font-size，让页面中使用rem单位的元素自动适配；另一种是直接指定特定元素的字体大小，按需选择即可。

完整示例代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS替代vw字体适配</title>
    <style>
        /* 示例样式：如果用根元素font-size的方案，推荐用rem单位 */
        .container {
            width: 80%;
            margin: 2rem auto;
            padding: 1.5rem;
            border: 1px solid #eee;
        }
        .title {
            /* 这里的2rem会基于根元素的font-size动态变化 */
            font-size: 2rem;
            margin-bottom: 1rem;
        }
        .content {
            font-size: 1rem;
            line-height: 1.6;
        }
        /* 也可以直接给元素设置固定类，用JS直接控制其font-size */
        .js-font {
            margin-top: 1rem;
            color: #2c3e50;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="title">动态字体适配示例</h1>
        <p class="content">这段文字使用rem单位，会跟随根元素字体大小自动变化。</p>
        <p class="js-font">这段文字由JavaScript直接控制字体大小，适配屏幕宽度。</p>
    </div>

    <script>
        // 防抖函数：优化resize事件触发频率，避免性能问题
        function debounce(func, wait) {
            let timeout;
            return function executedFunction(...args) {
                const later = () => {
                    clearTimeout(timeout);
                    func(...args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            };
        }

        // 方案1：调整根元素font-size，让rem单位适配
        function adjustRootFontSize() {
            // 基准设计稿宽度，可根据你的需求修改
            const baseWidth = 1920;
            // 基准字体大小（对应设计稿上的字体大小）
            const baseFontSize = 16;
            // 当前屏幕宽度
            const currentWidth = window.innerWidth;
            // 计算比例，限制最小和最大字体大小（可选）
            const scale = Math.min(Math.max(currentWidth / baseWidth, 0.7), 1.5);
            // 设置根元素font-size
            document.documentElement.style.fontSize = `${baseFontSize * scale}px`;
        }

        // 方案2：直接调整特定元素的字体大小
        function adjustElementFontSize() {
            const targetElement = document.querySelector('.js-font');
            if (!targetElement) return;
            // 基准设计稿宽度和对应字体大小
            const baseWidth = 1920;
            const baseFontSize = 18;
            const currentWidth = window.innerWidth;
            const scale = Math.min(Math.max(currentWidth / baseWidth, 0.7), 1.5);
            targetElement.style.fontSize = `${baseFontSize * scale}px`;
        }

        // 初始化执行一次
        adjustRootFontSize();
        adjustElementFontSize();

        // 监听窗口resize事件，用防抖优化
        window.addEventListener('resize', debounce(() => {
            adjustRootFontSize();
            adjustElementFontSize();
        }, 100));
    </script>
</body>
</html>

关键说明 #

• 防抖函数：避免窗口缩放时频繁执行适配逻辑，减少性能消耗，这里设置的等待时间是100ms，可根据需求调整。
• 基准尺寸：baseWidth和baseFontSize需要根据你的设计稿来修改，比如设计稿是1280px宽，就把baseWidth改成1280。
• 范围限制：Math.min(Math.max(scale, 0.7), 1.5)是为了防止字体过大或过小，你可以去掉这个限制，或者调整0.7和1.5的数值。
• 两种方案：如果是整个页面都需要适配，推荐方案1（用rem）；如果只是部分元素需要动态调整，用方案2更灵活。

你可以根据自己的实际需求修改参数和样式，直接运行这个示例就能看到效果啦！

内容的提问来源于stack exchange，提问作者Xavier Foster