如何合并两段jQuery代码实现小设备下指定span标签字体缩放

我明白你的需求啦——不想用媒体查询（因为会改所有span），只想在小设备下调整特定span的字体大小，而且要把两段单独运行的jQuery代码合并起来。咱们来一步步解决：

首先，你需要先给那些需要调整的span加个专属类，比如adjustable-span，这样就能精准定位，不会影响其他span。示例如下：

<span class="adjustable-span">需要调整的文本</span>
<span>不需要调整的文本</span>

接下来，把字体调整的逻辑封装成一个可复用的函数，然后在页面加载和窗口resize时都调用它，这样两段代码就完美合并了：

// 封装字体调整逻辑成函数
function adjustTargetSpanFont() {
    // 定义小设备的宽度阈值，比如768px，你可以根据实际需求修改
    const smallDeviceBreakpoint = 768;
    // 只选中需要调整的span
    const $targetSpans = $('.adjustable-span');

    // 判断是否是小设备
    if ($(window).width() < smallDeviceBreakpoint) {
        // 遍历每个目标span，逐个检查字体大小
        $targetSpans.each(function() {
            if ($(this).css('font-size') === '96px') {
                $(this).css('font-size', '26px');
            }
        });
    } else {
        // 可选：当窗口变回大屏幕时，恢复原字体大小（不需要的话可以删掉这段）
        $targetSpans.each(function() {
            if ($(this).css('font-size') === '26px') {
                $(this).css('font-size', '96px');
            }
        });
    }
}

// 页面加载完成后，先执行一次初始化调整
$(document).ready(function() {
    adjustTargetSpanFont();
});

// 窗口大小变化时，再次执行调整
$(window).on('resize', function() {
    adjustTargetSpanFont();
});

代码说明： #

• 精准定位：用类选择器adjustable-span只处理你需要的span，避免影响全局。
• 代码复用：把核心逻辑封装成函数，不管是页面初始化还是窗口resize，都只需要调用这个函数，解决了代码无法合并的问题。
• 小设备判断：加入了窗口宽度阈值，确保只在小设备下触发调整，符合你的需求。
• 逐个检查：用each()遍历每个目标span，避免因为多个span字体大小不同导致的判断误差。

如果不需要恢复大屏幕下的字体大小，直接删掉else里的代码就行~

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