錯誤的字體大小計算

我試圖寫一個簡單的字體大小更改器。這完美的工作，直到我使用引導框架。當我增加字體大小時，字體大小減小。這是一個奇怪的行爲。錯誤的字體大小計算

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/

來源

2015-06-10 DaFunkyAlex

EM如MDN所述：該單位表示計算出的元素的字體大小。如果用於font-size屬性本身，它表示元素的繼承字體大小。

這意味着元素的字體大小將取決於其父級的字體大小。

在你的小提琴，

身體字體大小是14px的
#bodyid字體大小16px的
要計算#bodyid字體大小，EM根據需要來計算它的父母在你的例子中是「身體」。你的小提琴使用#bodyid作爲基礎字體大小。如果您使用「body」，它應該可以正常工作。

變化需要：

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

到

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

來源

2015-06-10 07:57:35 wtflux

你製作的文檔中使用的所有尺寸都使用相同的單元的假設。例如。如果主體有1em並且元素的字體大小爲16px，則函數pxToEm將返回16（em）。

需要基於該元件單元上轉換

實施例爲（PX）到（EM）

1EM/16像素*（元件字體大小以像素）=導致的EM

來源

2015-06-10 07:56:19 Ryuk87

，您可以設置默認font-size到em：

#bodyid { 
    font-size: 1em; 
}

JSFIDDLE

來源

2015-06-10 08:01:06

嘿，這種方法不適用於1em以外的值。嘗試使用1.1em或0.9em，增加和減少功能會顯示意外的行爲。 – wtflux

錯誤的字體大小計算

回答

相關問題