CSS/Javascript fluid font size

后端 未结 2 1405
情书的邮戳
情书的邮戳 2021-02-06 17:23

My application has two views, a live mode and a preview mode. Both of these have windows which can be resized. They are the same html file. I am looking for a way to get the fon

2条回答
  •  一向
    一向 (楼主)
    2021-02-06 18:21

    I know I am answering my own question, but the answer above was helpful but not enough to suffice as one. So this is how I ended up doing it.

    First I set up this function which calculates a suitable font size based on a given width.

    function getFontSize(width){
        sizew = width / 100;
        size = sizew * 1.5;
        return size;
    };
    

    Then I got the function to run on load and on re size of the window then modify the body font size accordingly.

    $(window).resize(function(){
        size = getFontSize($(this).width());
        $("body").css("font-size", size + "px");
    }).resize();
    

    All you have to do from there is set up any element to have its font-size re-sizable by giving it an "em" or percentage font size.

提交回复
热议问题