online - jQuery/JavaScript: convierte los píxeles en em de una manera fácil

px to percentage

Question

Estoy buscando una manera fácil de agregar una línea de código a un complemento mío, para convertir un par de valores de píxeles en valores em, porque el diseño de mi proyecto debe estar en ems. ¿Hay una manera fácil de hacerlo, porque no quiero agregar un complemento de terceros al sitio?

No publicaremos el código aquí, ya que no tiene nada que ver con el complemento en sí.

Gracias.

Ejemplo: 13px -> ?? em

Answer 1

Antigua pregunta, pero para referencia, aquí hay algo que improvisé, el alcance y el sufijo son opcionales. Pásale un valor rem o em como cadena, por ejemplo. ''4em'' [puedes usar espacios y mayúsculas / minúsculas] y devolverá el valor de px. A menos que le asigne un alcance, que sería el elemento objetivo para encontrar el valor de EM local, se establecerá de forma predeterminada en cuerpo, lo que le dará efectivamente el valor rem. Por último, el parámetro de sufijo opcional [booleano] agregará ''px'' al valor devuelto, de modo que 48 se convierta en 48px por ejemplo.

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

devuelva 48 en un documento de tamaño de fuente 16px / 100%

/**
* 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;
  };

Answer 2

Creo que tu pregunta es muy importante. Dado que las clases de resoluciones de pantalla están aumentando rápidamente, el uso de la posición em para admitir una amplia gama de resoluciones de pantalla es un enfoque realmente atractivo. Pero no importa lo difícil que intente mantener todo en em: a veces obtiene un valor de píxel, tal vez de la función de arrastrar y soltar de JQuery o de otra biblioteca, y desearía convertir este valor en em antes de enviarlo de nuevo al servidor para que persista. De esa manera, la próxima vez que el usuario vea la página, el elemento estará en la posición correcta, independientemente de la resolución de pantalla del dispositivo que esté utilizando.

Los complementos de JQuery no son muy atemorizantes cuando puedes revisar el código, especialmente si son cortos y dulces como este complemento para convertir los valores de píxel a los que quieras. De hecho, es tan corto que voy a pegar todo aquí. Para el aviso de copyright ver el enlace.

$.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'';
};

Ejemplo de uso: $(myPixelValue).toEm(); o $(myEmValue).toPx(); .

Acabo de probar esto en mi aplicación, funciona muy bien. Así que pensé en compartir.

Answer 3

Ems no es igual a píxeles de ninguna manera. Son una medida relativa.

<span style="font-size: 1em;">This is 1em font size, which means the text is the same size as the parent</span>

<span style="font-size: 1.5em;">This is 1.5em font size, which means the text is 150% the size as the parent</span>

El tamaño de la base está determinado por el agente de usuario (navegador).

Answer 4

He empaquetado esta funcionalidad en una biblioteca, completa con la comprobación del tipo de parámetro: px-to-em

Dado este HTML:

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

Puedes esperar estas salidas:

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

Como el OP solicitó una forma de hacer esto sin una biblioteca, copié el código fuente de px-to-em a una demostración en vivo:

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>

Aprendí de esta respuesta que con getComputedStyle podemos obtener de manera confiable el valor de px del divisor con el punto decimal, lo que mejora la precisión del cálculo. Descubrí que la respuesta de Aras podría estar desactivada en más de 0.5px, lo que causó errores de redondeo para nosotros.

Answer 5

Lo siguiente parece hacer lo que necesita, aunque se basa en el font-size de font-size del elemento principal y del propio elemento, que se devuelve en 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 prueba de concepto .

Notas:

• La función devuelve falso, si el elemento que está intentando convertir a em es el body , aunque eso se debe a que no pude averiguar si fue sensato establecer el valor en 1em o simplemente dejarlo solo.

• Utiliza window.getComputedStyle() , por lo que no va a funcionar con IE, sin algunos ajustes.

Referencias:

• Math.floor() .
• parentNode .
• parseInt() .
• tagName .
• toLowerCase() .
• window.getComputedStyle() .

Answer 6

Los píxeles y ems son fundamentalmente diferentes tipos de unidades. No puedes simplemente convertir entre ellos.

Por ejemplo, un usuario con un tamaño de fuente predeterminado de 16px en un sitio donde los encabezados de nivel superior están diseñados al 200% del tamaño de fuente, 1em puede ser igual a 32px. Mueva el encabezado a otra parte en el documento, podría ser 64px o 16px. Entregue el mismo documento a un usuario diferente, podría ser 30/60 / 15px. Comienza a hablar sobre un elemento diferente, y puede cambiar de nuevo.

Lo más cerca que puede llegar a lo que desea es convertir los píxeles a ems + document + context + settings. Pero si alguien le ha pedido que diseñe su proyecto con ems, probablemente no se alegrará de que esté intentando hacerlo en píxeles y luego "convertir".

Answer 7

Por lo general, cuando desea convertir px en em , la conversión se produce en el propio elemento. getComputedStyle devuelve el valor en px que rompe su capacidad de respuesta. El código a continuación se puede utilizar para ayudar con este problema:

/**
 * 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;
};

Usarlo sería tan simple como:

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

Answer 8

Revise este pequeño script: https://github.com/normanzb/size

le ayuda a convertir las unidades siempre que pase un elemento dom de referencia