48

javascriptを使用してem単位でウィンドウの幅を取得する信頼できる方法を探しています。jQueryがピクセル測定でのみ結果を返すのを見て驚いた。どんな助けでも大歓迎です。

4

5 に答える 5

56

これはうまくいくようです：

$(window).width() / parseFloat($("body").css("font-size"));
于 2012-09-03T02:26:20.510 に答える
29

これは、jQueryを必要とせず、明示的なフォントサイズ宣言を必要としないソリューションです。

window.innerWidth / parseFloat(
  getComputedStyle(
    document.querySelector('body')
  )['font-size']
)
于 2017-02-06T06:07:32.517 に答える
1

それをすべてまとめる必要がある人のために、このコードは私のために働きます：

<p>Window size: <span id="width_px"></span> pixels or <span id="width_ems"></span> ems</p>
<script>
  window.onresize = function() {
    document.getElementById("width_px").innerHTML = window.innerWidth;
    document.getElementById("width_ems").innerHTML = window.innerWidth / parseFloat($("body").css("font-size"));
  };
</script>

リンクされたチュートリアルにあるウィンドウ幅のテストコードに追加された上記の回答を使用してまとめられています。

于 2013-11-16T17:00:54.987 に答える
0

計算することは可能ですが、フォントの選択（つまり、書体ファミリ、スタイル（太字、斜体など）、およびフォントサイズの組み合わせ）に依存するためem、「単純な」単位ではありません。pxもちろん、フォントサイズ自体は相対的なものにすることができます（たとえば、フォントに、、、emまたはexパーセンテージサイズを指定pxすると、そのフォントの計算された高さは親要素のサイズから導出されます）。

ページの幅を取得するにはem、次のように変換できます（警告：擬似コード）：

// For this to work reliably, size should be in px, pt, or mm.
function getWindowWidthInEm(fontFamily, style, size) {
    var box = document.createElement("span");
    box.innerText = "M";
    box.style.fontFamily = fontFamily;
    box.style.fontSize   = size;
    box.style.fontWeight = style is bold;
    box.style.fontStyle  = style is italic;

    var body = document.getElementsByTagName("body")[0];
    body.appendChild( box );

    var emInPx = box.getComputedStyle().width;

    body.removeChild( box );

    var windowPx = window.width;
    return windowx / emInPx;
}
于 2012-09-03T02:26:42.937 に答える
-20

簡単です、私たちが知っているので1em = 16px

var window_width_em = 1/16 * window_width_px;
于 2012-09-03T03:58:22.347 に答える