23

私のプロジェクトのレイアウトは em である必要があるため、いくつかのピクセル値を em 値に変換するコード行を私のプラグインに追加する簡単な方法を探しています。サイトにサードパーティのプラグインを追加したくないので、これを行う簡単な方法はありますか?

プラグイン自体とは関係がないため、ここにコードを投稿しません。

ありがとう。

例: 13px -> ??em

4

8 に答える 8

21

あなたの質問はとても重要だと思います。ディスプレイ解像度のクラスが急速に増加しているため、em ポジショニングを使用して幅広い画面解像度をサポートすることは、非常に魅力的なアプローチです。しかし、すべてを em に保持しようとしても、JQuery のドラッグ アンド ドロップや別のライブラリからピクセル値を取得することがあります。永続化のためにサーバーに送信する前に、この値を em に変換する必要があります。そうすれば、ユーザーが次にページを見るときに、使用しているデバイスの画面解像度に関係なく、アイテムが正しい位置に表示されます。

JQuery プラグインは、コードを確認できる場合、特にこのプラグインのように短くて便利で、必要に応じてピクセル値を em に変換できる場合は、それほど怖くありません。実際はとても短いので、ここにすべてを貼り付けます。著作権表示については、リンクを参照してください。

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

使用例：$(myPixelValue).toEm();または$(myEmValue).toPx();.

アプリケーションでこれをテストしたところ、うまく機能します。だから私は共有すると思った。

于 2012-11-05T11:12:09.903 に答える
15

font-size以下は、必要に応じて実行されるようですが、親と要素自体に基づいており、 で返され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 の概念実証。

ノート：

  • 変換しようとしている要素が の場合、関数は false を返しますが、emこれは、値を に設定するか、単にそのままにしておくbodyことが賢明かどうかを判断できなかったためです。1em

  • を使用window.getComputedStyle()しているため、いくつかの調整なしでは IE では動作しません。

参考文献:

于 2012-04-24T21:19:15.247 に答える
3

ピクセルと ems は、基本的に異なる種類の単位です。それらの間で単純に変換することはできません。

たとえば、トップレベルの見出しが 200% のフォント サイズでスタイル設定されているサイトでデフォルトのフォント サイズが 16 ピクセルのユーザーの場合、1em は 32 ピクセルに等しい場合があります。ドキュメント内の別の場所に見出しを移動します。64px または 16px の可能性があります。同じドキュメントを別のユーザーに渡します。30/60/15px の可能性があります。別の要素について話し始めると、再び変化する可能性があります。

あなたが望むものに最も近いのは、ピクセルからems + document + context + settingsに変換することです。しかし、誰かがあなたのプロジェクトを em でレイアウトするように頼んだ場合、彼らはおそらくあなたがそれをピクセルでやろうとしてから「変換」しようとしていることに満足しないでしょう.

于 2012-04-24T21:11:33.320 に答える
1

古い質問ですが、参考までに、ここに私がまとめたものがあります。スコープとサフィックスはオプションです。rem または em 値を文字列として渡します。「4em」[スペースと大文字/小文字を使用できます]、px 値を返します。ローカル EM 値を見つけるためのターゲット要素となるスコープを指定しない限り、デフォルトで body になり、効果的に rem 値が得られます。最後に、オプションのサフィックス パラメータ [ boolean ] は、たとえば 48 が 48px になるように、戻り値に「px」を追加します。

元：emRemToPx( '3em', '#content' )

font-size 16px / 100% ドキュメントで 48 を返す

/**
* 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;
  };
于 2014-10-31T11:40:39.323 に答える
-3

とにかく、Em はピクセルと等しくありません。それらは相対的な測定値です。

<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>

基本サイズは、ユーザーエージェント (ブラウザー) によって決定されます。

于 2012-04-24T21:11:43.553 に答える