Javascript 是否可以使用javascript以em为单位获取窗口的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12241251/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to get the width of the window in em units using javascript?
提问by hammerbrostime
I'm looking for a reliable way to get the width of the window in em units using javascript. I was surprised to see that jQuery will only return a result in pixel measurements. Any help is appreciated.
我正在寻找一种可靠的方法来使用 javascript 以 em 为单位获取窗口的宽度。我很惊讶地看到 jQuery 只会返回像素测量结果。任何帮助表示赞赏。
回答by hammerbrostime
This seems to work:
这似乎有效：
$(window).width() / parseFloat($("body").css("font-size"));
回答by Brad
Here's a solution that doesn't require jQuery, and doesn't require an explicit font-size declaration.
这是一个不需要 jQuery 并且不需要显式字体大小声明的解决方案。
window.innerWidth / parseFloat(
getComputedStyle(
document.querySelector('body')
)['font-size']
)
回答by bofa
For those who need it all put together, this code works for me:
对于那些需要将它们放在一起的人，此代码对我有用：
<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>
It's put together using the answer above added to the window-width test codefound in the linked tutorial.
它使用上面添加到链接教程中的窗口宽度测试代码的答案组合在一起。
回答by Dai
It's possible to calculate it, but emisn't a "simple" unit like pxbecause it depends on a font selection (that is, a combination of typeface family, style (bold, italic, etc), and font size). Of course font size itself can be relative (e.g. if you give a font an em, ex, or percentage size then the computed pxheight for that font is derived from the parent element's size).
可以计算它，但em不是“简单”单位，px因为它取决于字体选择（即字体系列、样式（粗体、斜体等）和字体大小的组合）。当然字体大小本身可以是相对的（例如，如果您给字体一个em、ex或百分比大小，则该px字体的计算高度来自父元素的大小）。
To get the emwidth of a page you could do the conversion like this (warning: psuedocode):
要获得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;
}
回答by Rezigned
Simple, since we know 1em = 16px
很简单，因为我们知道 1em = 16px
var window_width_em = 1/16 * window_width_px;
