web-dev-qa-db-ja.com

javascriptを使用してem単位でウィンドウの幅を取得することは可能ですか？

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

javascriptjquerymedia-queriesem
36
hammerbrostime

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

$(window).width() / parseFloat($("body").css("font-size"));
50
hammerbrostime

JQueryを必要とせず、明示的なフォントサイズ宣言を必要としないソリューションを次に示します。

window.innerWidth / parseFloat(
  getComputedStyle(
    document.querySelector('body')
  )['font-size']
)
20
Brad

それをすべて必要とする人のために、このコードは私のために機能します：

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

リンクされたチュートリアルにある window-width test code に追加された上記の回答を使用して組み立てられます。

1
bofa

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

ページのem幅を取得するには、次のような変換を行うことができます（警告：psuedocode）：

// 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;
}
0
Dai