Question

我试着写一个简单的字体大小更换器。这完全有效，直到我使用bootstrap框架。当我增加字体大小时，字体大小会减小。这是一种奇怪的行为。

var baseFontSize;

(function () {
    "use strict";

    /*  Global variables */ 



    /*  jQuery Plugin: convert fontsize of a DOM element to em
    *
    *   usage: $( element ).pxToEm()
    *   returns a number rounded to 3 digits
    *
    */
    $.fn.pxToEM = function () {
        var fontSize = this.css("font-size"),
            value = /[^em|pt|px]*/g.exec(fontSize);
        return Number((value / baseFontSize).toFixed(3));
    };

}(jQuery));



$(document).ready(function () {
    "use strict";
    var body = $("#bodyid"),
        increaser = $("#font-sizer > ul > li:first-child"),
        decreaser = $("#font-sizer > ul > li:last-child"),
        maxFontSize = 2.0,
        minFontSize = 0.5;

    baseFontSize = parseFloat(body.css("font-size"));

    increaser.click(function (event) {
        var actualFontSize = body.pxToEM();
        actualFontSize += 0.1;
        if (actualFontSize > maxFontSize) {
            actualFontSize = maxFontSize;
        }
        body.css("font-size", actualFontSize + "em");
    });

    decreaser.click(function (event) {
        var actualFontSize = body.pxToEM();
        actualFontSize -= 0.1;
        if (actualFontSize < minFontSize) {
            actualFontSize = minFontSize;
        }
        body.css("font-size", actualFontSize + "em");
    });

});

我在代码中添加了一个小提琴链接。

https://jsfiddle.net/uqrqo6bs/

Answer 1

您可以将默认font-size设置为em：

#bodyid {
    font-size: 1em;
}

<强> JSFIDDLE

Answer 2

MDN所述

EM ：此单位表示元素的计算字体大小。如果在font-size属性本身上使用，则表示元素的继承字体大小。

这意味着元素的em中的font-size将取决于其父级的字体大小。

在你的小提琴中，

正文字体大小为14px
#bodyid font-size是16px
要计算#bodyid font-size，需要根据它的父级计算em，在您的示例中为“body”。你的小提琴使用#bodyid作为基本字体大小。如果你使用'body'，它应该可以正常工作。

需要更改：

baseFontSize = parseFloat(body.css("font-size"));

到

baseFontSize = parseFloat($('body').css("font-size"));

Answer 3

您假设文档中使用的所有尺寸都使用相同的单位。例如。如果正文为1em且元素的字体大小为16像素，则函数pxToEm将返回16（em）。

您需要根据元素单位进行转换

（px）到（em）

的示例

1em / 16px *（px中的元素字体大小）=导致em

错误的字体大小计算

3 个答案: