android - 如何为旧版 android 浏览器实现响应字体的 vh 和 vw 字体大小单元？

Question

似乎较旧的 android 浏览器不支持 css 中的 vh 和 vw 字体大小单位。有没有办法使用 vw 和 vh 或任何其他方式使字体在旧版 android 浏览器中响应？我有很多不同字体大小的文本，我不想使用媒体查询。

Answer 1

您可以使用 jquery 来做到这一点。有 3 个步骤可以使字体响应。

1. 将字体调整为固定的。例如 800 像素。
2. 在要使字体具有响应性的任何 dom 元素中使用类名。例如class="rf"（响应式字体）。
3. 使用下面的 jquery 代码使字体具有响应性。

html代码..

<div class="rf">this is sample text</div>

jquery代码..

$(function(){

  var element = $('.rf');
    element.each(function (i) {
        fonts = $(this).css('font-size');
        fonts = fonts.replace("px","");
        windowWidth = $(window).width();
        fontSize = fonts*windowWidth/800;
        $(this).css('font-size',fontSize);
    });

})

根据您的类名“rf”和用于调整字体大小“800”的代码更改代码。