如何为旧的Android浏览器实现响应式字体的vh和vw字体大小单位？

Question

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

Answer 1

您可以使用jquery执行此操作。有三个步骤可以使字体响应。

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

html代码..

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

jquery code ..

$(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);
    });

})

根据您的班级名称更改代码＆＃34; rf＆＃34;以及用于调整字体大小的字符＆＃34; 800＆＃34;。