javascript和EM

Question

我想知道人们对完全基于EM的想法是什么？就我个人而言，我几乎完全同意它，字体大小，布局，媒体查询等等。回到用户的个人偏好是非常有意义的。

然而，当涉及到javascript时，除了像素之外似乎很难使用其他任何东西。

例如，如果我想在屏幕尺寸大于某个尺寸时添加一个图像，我可能会在HTML中执行此操作：

if (document.documentElement.clientWidth > 500) {
    document.write('<img src="whatever.jpg" alt="whatever" />');
}

或者，在js中，当屏幕到达媒体查询断点时，我可能想要更改一些东西(可能是换出一个元素)。然而，我最终会在CSS中得到一个奇怪的EMs和js中的像素的混合，如果用户的字体大小不是默认的，这将不会匹配。

这有意义吗？有没有人有什么建议？也许是EM字体和px的布局？但这就失去了新兴市场的一些优点。

渴望听到你的想法！

谢谢

Answer 1

可以使用px。您可以很容易地计算出px-em。我建议你阅读this exhausting article来了解你的问题

处理em值最流行的方法是将正文的字体大小设置为62.5%。因为默认的浏览器字体大小是16px，所以它是10px (没有将其硬设置为10px，这不会级联)。使用10作为乘数比使用16容易得多。这样，您需要18px的字体大小？使用font-size: 1.8em。

那么，当它只是一个使用像素值的抽象时，为什么要为所有这些em业务而烦恼呢？三个可能的原因：

1. 在IE 6中可调整大小
2. 与其他大小(弹性宽度位置)的关系
3. Em的级联就像mo

一样

第一个是大的。如果你基本上想使用像素，但又不喜欢可访问性问题，em可能是你的选择。

css-tricks.com