问题标签 [em]

我的网站几乎完全是用“em”（而不是 px）设计的。对于现代浏览器来说，它应该要好得多。

大多数文本是字体大小：1em。默认情况下 1em = 16px，我没有指定它。

但我有一些字体大小为 1.2em 和其他为 0.8em 的内容（例如 H1 或小按钮）。

“em”的问题在于它会根据字体大小重新缩放元素的所有大小（边距、填充、高度......）。

我的 CSS 中有特定的代码：

普通按钮的边距为 1x1x16 = 16px。但小按钮的边距为 1x0.8x16 = 12.8px。

显然这是一个特定的“em”属性（在“px”中不是这种情况），它根据元素的字体大小缩放所有内容。

这个例子很简单；但在我的网站上，我很难保持一致。

如何取消激活此属性，以便在上面的示例中 2 个按钮具有相同的边距？（无需重新计算尺寸；这就是我现在正在做的事情！）

so I though about using svg files for icons. for e.g. like this

I would like it to scale with the font-size of the user, which is why I figured I use em. But if the users default font-size is something like 23px or so, the svg is all blurry because the icons can not fit perfectly into the pixels. Is there a way to get around that? Can I detect the users font-size with a mediaquery and set the icon font-size to a certain value to make sure the icons look okay?

Comparison 22px (bad/blurry) to 24px (correct)

Demo: http://jsfiddle.net/TgHLf/17/

我试图了解如何使用em单元进行响应式设计，我已经搜索了很多关于它的内容。我从这些页面中了解到的em是一个相对单位，如果您定义正文字体大小，则相同将等于 1em。但我仍然对以下内容感到困惑：

1. 如何em用于我的响应式设计，我的意思是当我们使用%单元页面时会相应地调整它的宽度，我们怎么能em用于同样的事情。

2. 哪个好%或em。

实际上我不确定如何使用 em 使页面完全响应。如果您能帮助我提供一些链接或小型演示，那就太好了。

我不确定我能说得有多好，但让我试一试。

我有一个严重基于 jQuery 的网站；这意味着它的大部分内容都是由 jQuery 创建、测量和设置的。

所有这些测量值都是 px。我需要将它们转换为 em，或者最好创建一个函数来为我转换它们。如果所有字体大小都是 16 像素（或 100%），这将很容易；然而，情况并非如此。我需要它来检测容器的字体大小并从那里开始。

如果措辞不当，我深表歉意。如果你能理解这一点并帮助我，那就太好了。如果你觉得不可能，请不要回复，一切皆有可能，只看你愿意付出多少努力。

我有一个图像，用作 html 标记中的源代码img，位于div. 使用em大小单位，我想将我的图像调整为他父 div 框的一半。因此，我将 img 的 CSS 属性width和height都设置为0.5em. 但是正如你在下面的代码中看到的，结果并不像预期的那样！

小提琴： http: //jsfiddle.net/framj00/pz27X/1/
你能帮我解决这个问题吗？
非常感谢！:)

我一直在阅读 ems，我明白为什么我们应该使用它们。

所以现在我正在尝试将它应用到我的布局中。在我的布局中，我有两个div彼此相邻。左边的有一个font-size: 1em;，第二个有一个font-size: 0.8em。

两者都div应该具有相同的大小和边距。（在这个例子中，它们是 6em 宽度，1em 边距）

现在我遇到的问题：
第一个div，with font-size: 1em，是（浏览器默认为16px）16 x 1 x 6 = 96px
第二个div，with font-size: .8em，是16 x .8 x 6 = 76.8px

看到这个JSFiddle，作为演示。

为了使两个 div 大小相等，但字体大小不同，需要此代码：

这意味着我必须用 for 的样式覆盖我声明的一般div样式.small2。

这是要走的路，还是我正在监督更好的解决方案？

正如标题所说，我正在尝试在页面的所有元素上使用带有 px 的 REMS 回退旧浏览器，而不仅仅是字体。测试网站是：test.glow-sticks.org

如果以下任何术语不正确，我深表歉意，我远非专家！

在超过 1024 的分辨率上，使用 (html in css) 的字体大小设置为 62.5%，简单来说就是 1rem = 10px，在这个分辨率上，我将默认字体设置为 1.4rem / 14px

在超过 1680 的分辨率上，html css 设置为 71.4%，通过设置此百分比，字体从 14px 变为 16px，当然所有元素都以相同的百分比增加，这非常酷，并且似乎使所有内容保持完美同步。

在我的计算机上，这似乎可以完美运行，就像在我一直使用的许多其他测试平台上一样。然而，我的网络开发人员似乎在她的机器上遇到了问题，但仅限于 chrome。（firefox和IE不受影响）

在她的机器上，当她将分辨率降至 1024（从她的原生 1920 分辨率）时，网站正在加载水平滚动条，而在我的机器上，它适合 1024。使用 chrome 检查元素工具时会变得更有趣。我一直在检查一个 DIV，特别是 Div id=wholepage，在 1024 屏幕上查看时它应该是 960px 宽，在 1680+ 上查看时它应该是 1097px 宽。

然而，在她的 Chrome 上，div=wholepage 在 1024 分辨率上显示 1152px，在她的原生 1920 分辨率上也显示 1152px。

我注意到在我的 Chrome 版本上，我必须将字体大小设置为 75% 才能重现相同的内容。似乎无论我将字体大小设置为整页 div 还是希望为 1152px。我什至尝试了 10%，这在我的 chrome 上非常正确，使一切变得很小，但在她的机器上没有任何变化。唯一改变的是 font-size 确实说 10%，但它好像没有被尊重，并且被至少 75% 覆盖。

请问谁能重现这个？

她能想出的唯一解决办法是使用更高的百分比，比如 90% 和 103%，这提供了与 62.5 和 71.4 相同的增加，但是保持它看起来更好，所以 1 rem = 10px，这就是我想保持这个的原因62.5为基础。

我的 em 单位有问题，我已将导航列表宽度设置为 6.250em，相当于 100px 并且工作正常。当我将每个 li 的宽度更改为 6.250em 时，它不会延伸到与导航列表相同的宽度。为什么会发生这种情况，我该如何解决？

CSS 代码：

HTML 代码：

JSFiddle 这里：http: //jsfiddle.net/2ZT9w/1/

1000 个字母间距等于 1 em。所以 -100 字母间距等于 -0.1em，使用数学 -100/1000px。

我不明白为什么我的 Dreamweaver 导出与我的 Illustrator 设计不匹配。间距还是太大了。

我正在使用 72px 字体..

我正在为响应式网站创建模板。我了解到 em 非常适合用于响应式设计。但问题是我将正文字体大小设置为 62.5%，但是当我使用 p、span 和其他元素（如 2em）时，字体大小比 2 em 与 20px 不同。根据我的默认字体大小，正文中的任何位置都应该是 2em=20px，因为 62.5% 会覆盖默认的 1em=16px 到 10px。请建议我应该改变什么，以便每当我将任何元素的字体大小设置为 2em 时，它都会是 20 像素。