问题标签 [em]

我目前正在尝试学习自适应/移动网页设计，其中涉及针对不同平台和分辨率的媒体查询，在设计中使用 em 而不是 px 等。我目前正在尝试将两个 em-width 元素彼此相邻放置；我的内容旁边的导航/信息栏。

我已将信息栏设置为 16em 宽（根据字体大小转换为每 em 16px），内容为 calc(100% - 17em) 宽。我认为这应该在菜单和内容之间留下 1em 的边距，无论我缩放和调整窗口大小，但最终结果不同意：

100% 缩放

25% 缩放

朋友的屏幕

元素之间的空间因缩放级别而发生很大变化，尽管一切都普遍使用“em”单位，并且相关元素之间的字体大小没有改变。可能是什么问题？

信息：我正在使用媒体查询将导航从水平对齐过渡到侧边栏。正在运行的是查询的版本。在查看 CSS 时请记住这一点。这可能是问题的一部分，尽管我严重怀疑它......

HTML 代码：

我有一个项目，其中IE9是最低兼容性浏览器。这意味着我可以使用rem单位。

根据我对涉及许多开发人员的大型项目的经验，“em”的使用会造成相当混乱。我并不是说它本身就不好，只是随着时间的推移，它似乎“自然地”发生了，当有不同技能的不同人在一个项目上工作时。Dom 元素往往会堆积起来，并且不能很好地与“em”的复合行为一起使用。

在网上看了很多资源后，似乎有很多关于这个问题的货物崇拜。

解决方案1的诱惑：从这个开始（建议在这里css3files.com评论 - David Buell）：

解决方案1：

Rem 用于任何与文本相关的内容，而 px 用于其余内容。

但即便如此，我不确定在哪里我真的被限制使用除“rem”之外的另一个单位。我做了一些缩放测试，并没有注意到“rem”和“px”之间的区别。“rem”相对于“px”的优势似乎是“rem”将与主体上带有“%”的 a 大小相关，这允许针对特定断点在一行中更改所有文本大小。

默认文本大小更改似乎是一个问题，因为“px”和“rem”文本保持不变。但我想知道是否有关于此的使用统计信息（这个 SO 用户认为没有人）。如果它真的被使用了，我想我应该把“简单数学”字体大小的定义放在 html 标签上。

解决方案 2：

这给出了 13px 的大小，浏览器的默认大小为 16px - 用户仍然可以更改默认设置。（从 16 岁开始数学并不难）

我真正不确定的是不同屏幕分辨率的情况，以及不同像素密度的情况（我知道可以在 Windows 上更改）。

总结一下：

• 无需容纳任何低于 IE9 的东西。
• 响应式设计。
• 很好地处理缩放。
• 如果确实使用了，则处理用户文本大小的变化。
• 没有魔法，尽可能准系统（我使用 css 预处理器，但我想避免疯狂使用它）。

我认为许多前端开发人员会调整他们的界面以适应浏览器缩放。但是纯文本缩放的做法是什么？它是一个更隐藏的浏览器功能。有多少开发人员实际测试它并为它编写代码？

我看到 SO 支持它，但它有点突破了一定的规模。

支持响应式网页设计的 IE9+ 界面的正确基础设置是什么？

谢谢

-olivvv

大家圣诞快乐，今年我又开始冒险了。我试图让我的一个随机绿色盒子变成一个红色盒子。我使用渐变图案来生成绿色条纹，但我的红色框更小，即使它们都是 3em！到底是怎么回事！！！

请看我的 codepen 交易： http ://codepen.io/githubmaht/pen/jinHo

CSS ----->

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

但是，当涉及到 javascript 时，似乎很难使用像素以外的任何东西。

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

或者，在 js 中，当屏幕到达媒体查询断点时，我可能想要更改某些内容（也许换掉一个元素）。但是，我最终会在 CSS 中得到 EM 和 js 中像素的奇怪混合，如果用户字体大小不是默认值，它们将不匹配。

那有意义吗？有人有什么建议吗？也许 EM 字体和 px 用于布局？但这失去了一些新兴市场的美丽......

很想听听你的想法！

谢谢

我正在与使用 EM 而不是 PX 的 Zurb Foundation (v4) 合作。

我发现使用 EM 的一个缺点是元素的边距由 $column-gutter 设置（例如 0.9375em）如果元素的字体大小不是 1em（例如 0.875em），则该元素的边距更小（因为 ems 是相对于字体大小的）而不是其字体大小为 1em 的元素。

因此，如果我将 2 个元素彼此相邻，则两者的实际边距结果是不一致的。即使元素的字体大小不同，我也真的想保持元素的边距一致。有没有一种聪明的方法来实现这一点（不使用 px）？

我已经看得很远了，无法弄清楚这一点。我有几个元素需要根据标题的高度进行调整，并且使用 CSS 进行调整是一件很痛苦的事情，因为标题发生了变化，所以我需要一些不会隐藏目标内容的东西，当标题是粘性的并且标题只粘在最小宽度 62em。如果我将“62em”更改为“992”，它可以在我的 1 像素设备（我的桌面）上正常工作，但我需要调整大小才能在 62em 上触发。

基于第一个答案，这是错误的，但对我有很大帮助，这似乎可以解决问题：

在 Chrome（版本 31.0.1650.63 m）中使用 em 单位时遇到问题。

遵循 JSFiddle 在 Chrome 中会产生不正确的输出（与 Firefox 或 IE 相比，绿框太大）：

http://jsfiddle.net/rapik/j72aZ/

HTML：

CSS：

问题似乎是font-size: 0.1em没有使 em 小 10 倍的规则。相反，它将 em 设置为某个最小值。和之间没有区别font-size: 0.1em，font-size: 0.2em因为两者都小于这个神奇的最小值....

这是一个错误还是我做错了什么？

这种特殊情况可以通过将“bbb”类的所有值乘以 10 来解决。但在我的情况下，事情更复杂，我需要这个font-size: 0.1em。

我正在使用 em 单位来构建可扩展的控件。我的控件有根 div 和多个子元素。这个想法是使用 em 设置所有值，并且 em 的运行时大小由根元素的字体大小控制。如果一个元素定义了字体大小，那么它的 em 将取决于它。

我将不胜感激任何想法或建议！

更新：

以下是我所说的不同输出的屏幕截图：

我一直在想这个问题一段时间，并创建了一个像素版本和 em 版本来比较放大时的差异 - 没有。我读过的大部分内容都说“你需要将它们制作成 em 以实现可扩展性”，但我认为现在所有现代浏览器都可以正确扩展，这是一个有争议的问题。只要您将 CSS 中的基本字体大小设置为 ems/rems，以像素编写的填充和边距就会相应地缩放，就像它们是 ems 一样。我错过了什么吗？

当我们在包装器或 body 元素中使用 62.5% 或 10px 作为基本单位时，子节点可以更简单地使用 em 单位。然而，chrome 的最小字体大小为 12px 使得 62.5% 的设计失败。如果我们使用 12px 作为基本单位，就会使 em 计算变得困难。我想到的方式是使用20px作为基本单位，那么内部节点中的em单位可以将原始像素大小除以20。在响应式设计中解决这个问题的常用方法是什么？

我遇到了一个父 DOM 元素具有相当大的 em 值的情况。问题是所有内联子元素在它们上方都有很大的边距，即使它们的字体大小要小得多：

来源（http://jsfiddle.net/rapik/w87m7/2/）：

我怎样才能在不改变字体大小的情况下摆脱这个差距？我也不想将元素的显示类型更改为“块”。

我试过改变行高但没有成功。

PS 如果您想知道，为什么我需要这个：Chrome 有一个“功能”，可以防止字体大小在任何时候小于 6 像素。所以我将所有值乘以十并得到了这个问题。对应问题：Chrome中使用em单位的问题