So konvertieren Sie Pixel auf einfache Weise in em

Lesezeit: 7 Minuten

Benutzeravatar von user759235
Benutzer759235

Ich suche nach einer einfachen Möglichkeit, einem Plugin von mir eine Codezeile hinzuzufügen, um ein paar Pixelwerte in em-Werte umzuwandeln, da das Layout meines Projekts in ems sein muss. Gibt es eine einfache Möglichkeit, dies zu tun, da ich der Website kein Plug-in eines Drittanbieters hinzufügen möchte.

Ich werde den Code hier nicht posten, da er nichts mit dem Plugin selbst zu tun hat.

Beispiel: 13px -> ??em

  • das könnte dir helfen pxtoem.com Überprüfen Sie die Registerkarte “Lernen”.

    – chepe263

    24. April 2012 um 21:07 Uhr

Benutzeravatar von Aras
Aras

Ich finde deine Frage sehr wichtig. Da die Klassen von Bildschirmauflösungen schnell zunehmen, ist die Verwendung von em-Positionierung zur Unterstützung einer breiten Palette von Bildschirmauflösungen ein wirklich ansprechender Ansatz. Aber egal wie sehr Sie versuchen, alles in em zu behalten – manchmal erhalten Sie einen Pixelwert, vielleicht von JQuery Drag & Drop oder aus einer anderen Bibliothek, und Sie möchten diesen Wert in em konvertieren, bevor Sie ihn zur Persistenz an den Server zurücksenden. Auf diese Weise befindet sich das Element beim nächsten Aufrufen der Seite an der richtigen Position – unabhängig von der Bildschirmauflösung des verwendeten Geräts.

JQuery-Plugins sind nicht sehr beängstigend, wenn Sie den Code überprüfen können, insbesondere wenn sie kurz und bündig sind Dieses Plugin zum Konvertieren von Pixelwerten in em wie du willst. Tatsächlich ist es so kurz, dass ich das Ganze hier einfügen werde. Urheberrechtshinweis siehe Link.

$.fn.toEm = function(settings){
    settings = jQuery.extend({
        scope: 'body'
    }, settings);
    var that = parseInt(this[0],10),
        scopeTest = jQuery('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(settings.scope),
        scopeVal = scopeTest.height();
    scopeTest.remove();
    return (that / scopeVal).toFixed(8) + 'em';
};


$.fn.toPx = function(settings){
    settings = jQuery.extend({
        scope: 'body'
    }, settings);
    var that = parseFloat(this[0]),
        scopeTest = jQuery('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(settings.scope),
        scopeVal = scopeTest.height();
    scopeTest.remove();
    return Math.round(that * scopeVal) + 'px';
};

Anwendungsbeispiel: $(myPixelValue).toEm(); oder $(myEmValue).toPx();.

Ich habe das gerade in meiner Anwendung getestet, es funktioniert großartig. Also dachte ich, ich teile.

  • Ich habe jQuery noch nie so verwendet gesehen. Ich gehe davon aus, dass dies Zeichenfolgenwerte unterstützt ("3px" oder "3em"), aber fordert das jQuery nicht auf, das Dokument nach diesen Selektoren abzufragen, bevor Sie überhaupt zu den Plugins gelangen .toPx() oder .toEm()?

    – Michael Lewis

    6. Januar 2017 um 19:21 Uhr

  • Ich sehe wirklich keinen Sinn darin, diese zu einer jquery / $-Funktion zu machen – eine einfache Funktion toPx(ems) oder eine Funktion toEms(px) wäre mir klarer.

    – Grebe.123

    12. November 2018 um 19:44 Uhr

Benutzeravatar von David Thomas
David Thomas

Das Folgende scheint Ihren Anforderungen zu entsprechen, obwohl es auf dem basiert font-size des übergeordneten Elements und des Elements selbst, das zurückgegeben wird px:

function px2em(elem) {
    var W = window,
        D = document;
    if (!elem || elem.parentNode.tagName.toLowerCase() == 'body') {
        return false;
    }
    else {
        var parentFontSize = parseInt(W.getComputedStyle(elem.parentNode, null).fontSize, 10),
            elemFontSize = parseInt(W.getComputedStyle(elem, null).fontSize, 10);

        var pxInEms = Math.floor((elemFontSize / parentFontSize) * 100) / 100;
        elem.style.fontSize = pxInEms + 'em';
    }
}

JS Fiddle Proof-of-Concept.

Anmerkungen:

  • Die Funktion gibt false zurück, wenn das Element, in das Sie konvertieren möchten em ist der bodyaber das liegt daran, dass ich nicht herausfinden konnte, ob es sinnvoll ist, den Wert auf zu setzen 1em oder lass es einfach bleiben.

  • Es verwendet window.getComputedStyle()also wird es ohne einige Anpassungen nicht mit IE funktionieren.

Verweise:

Pixel und ems sind grundlegend unterschiedliche Arten von Einheiten. Sie können nicht einfach zwischen ihnen konvertieren.

Beispiel: Ein Benutzer mit einer Standardschriftgröße von 16 Pixel auf einer Website, auf der Überschriften der obersten Ebene mit einer Schriftgröße von 200 % formatiert sind, kann 1em gleich 32 Pixel sein. Verschieben Sie die Überschrift an eine andere Stelle im Dokument, sie könnte 64 Pixel oder 16 Pixel groß sein. Geben Sie dasselbe Dokument einem anderen Benutzer, es könnte 30/60/15 Pixel groß sein. Fangen Sie an, über ein anderes Element zu sprechen, und es kann sich wieder ändern.

Am nächsten kommen Sie dem, was Sie wollen, wenn Sie von Pixeln zu ems+document+context+settings konvertieren. Aber wenn Sie jemand gebeten hat, Ihr Projekt mit ems zu gestalten, wird er wahrscheinlich nicht erfreut sein, dass Sie versuchen, es in Pixeln zu machen und dann zu “konvertieren”.

  • Es gibt gültige Fälle, in denen Sie nur Zugriff auf den Pixelwert haben. Wenn Sie beispielsweise ein Div auf der Seite herumziehen, möchten Sie möglicherweise den em-Wert abrufen, bevor Sie die Position des Div beibehalten. Ich denke, die Frage ist vollkommen gültig und es ist möglich, Pixel in em zu konvertieren, wenn Sie dies im Browser tun. Schließlich konvertiert der Browser selbst die em-Werte vor dem Rendern in Pixel.

    – Aras

    5. November 2012 um 9:55 Uhr

Alte Frage, aber als Referenz, hier ist etwas, das ich zusammengeschustert habe, Umfang und Suffix sind optional. Übergeben Sie ihm einen rem- oder em-Wert als Zeichenfolge, z. ‘4em’ [ you can use spaces and upper/lowercase ] und es wird den px-Wert zurückgeben. Wenn Sie ihm keinen Gültigkeitsbereich zuweisen, der das Zielelement zum Ermitteln des lokalen EM-Werts wäre, wird standardmäßig body verwendet, wodurch Sie effektiv den rem-Wert erhalten. Zuletzt der optionale Suffix-Parameter [ boolean ] fügt ‘px’ zum zurückgegebenen Wert hinzu, sodass beispielsweise 48 zu 48px wird.

ex: emRemToPx( '3em', '#content' )

geben Sie 48 auf einem Dokument mit Schriftgröße 16px / 100% zurück

/**
* emRemToPx.js | @whatsnewsisyphus 
* To the extent possible under law, the author(s) have dedicated all copyright and related and neighboring rights to this software to the public domain worldwide. This software is distributed without any warranty.
* see CC0 Public Domain Dedication <http://creativecommons.org/publicdomain/zero/1.0/>.
*/
  var emRemToPx = function( value, scope, suffix ) {
    if (!scope || value.toLowerCase().indexOf("rem") >= 0) {
      scope="body";
    }
    if (suffix === true) {
      suffix = 'px';
    } else {
      suffix = null;
    }
    var multiplier = parseFloat(value);
    var scopeTest = $('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(scope);
    var scopeVal = scopeTest.height();
    scopeTest.remove();
    return Math.round(multiplier * scopeVal) + suffix;
  };

Normalerweise, wenn Sie konvertieren möchten px zu emerfolgt die Konvertierung auf dem Element selbst. getComputedStyle gibt den Wert in zurück px die ihre Reaktionsfähigkeit unterbrechen. Der folgende Code kann verwendet werden, um bei diesem Problem zu helfen:

/**
 * Get the equivalent EM value on a given element with a given pixel value.
 *
 * Normally the number of pixel specified should come from the element itself (e.g. element.style.height) since EM is
 * relative.
 *
 * @param {Object} element - The HTML element.
 * @param {Number} pixelValue - The number of pixel to convert in EM on this specific element.
 *
 * @returns {Boolean|Number} The EM value, or false if unable to convert.
 */
window.getEmValueFromElement = function (element, pixelValue) {
    if (element.parentNode) {
        var parentFontSize = parseFloat(window.getComputedStyle(element.parentNode).fontSize);
        var elementFontSize = parseFloat(window.getComputedStyle(element).fontSize);
        var pixelValueOfOneEm = (elementFontSize / parentFontSize) * elementFontSize;
        return (pixelValue / pixelValueOfOneEm);
    }
    return false;
};

Die Verwendung wäre so einfach wie:

var element = document.getElementById('someDiv');
var computedHeightInEm = window.getEmValueFromElement(element, element.offsetHeight);

Benutzeravatar von Jackson
Jackson

Ich habe diese Funktionalität in eine Bibliothek gepackt, komplett mit Parametertypprüfung: px-to-em

Angesichts dieses HTML:

<p id="message" style="font-size: 16px;">Hello World!</p>

Sie können diese Ausgaben erwarten:

pxToEm(16, message) === 1
pxToEm(24, message) === 1.5
pxToEm(32, message) === 2

Da das OP nach einer Möglichkeit gefragt hat, dies ohne Bibliothek zu tun, habe ich den Quellcode von kopiert px-to-em zu einer Live-Demo:

function pxToEm (px, element) {
  element = element === null || element === undefined ? document.documentElement : element;
  var temporaryElement = document.createElement('div');
  temporaryElement.style.setProperty('position', 'absolute', 'important');
  temporaryElement.style.setProperty('visibility', 'hidden', 'important');
  temporaryElement.style.setProperty('font-size', '1em', 'important');
  element.appendChild(temporaryElement);
  var baseFontSize = parseFloat(getComputedStyle(temporaryElement).fontSize);
  temporaryElement.parentNode.removeChild(temporaryElement);
  return px / baseFontSize;
}

console.log(pxToEm(16, message), 'Should be 1');
console.log(pxToEm(24, message), 'Should be 1.5');
console.log(pxToEm(32, message), 'Should be 2');
<p id="message" style="font-size: 16px;">Hello World!</p>

Aus dieser Antwort habe ich das mit gelernt getComputedStyle wir können den Wert des Divisors px zuverlässig mit dem Dezimalpunkt erhalten, was die Genauigkeit der Berechnung verbessert. Ich habe festgestellt, dass die Antwort von Aras um mehr als 0,5 Pixel abweichen kann, was bei uns zu Rundungsfehlern geführt hat.

Benutzeravatar von Tehila
Tehila

Versuchen Sie, dies zu verwenden:

parseInt(myPixelValue) / parseFloat($("body").css("font-size"));

  • Willkommen bei SO und vielen Dank für Ihren Beitrag. Ich empfehle Ihnen wirklich, Ihre Antwort zu kommentieren, insbesondere angesichts der Tatsache, dass es 8 andere Antworten gibt (denken Sie an eine Person, die versucht, eine relevante Antwort auszuwählen, warum sollte sie Ihre versuchen? Wie hilfreich ist sie im Vergleich zu anderen?)

    – Jakow L

    21. Februar 2019 um 14:03 Uhr

1405410cookie-checkSo konvertieren Sie Pixel auf einfache Weise in em

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy