问题标签 [em]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
318 浏览

css - em 宽度的奇怪行为

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

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

100% 缩放 100% 缩放...

25% 缩放 25% 缩放...

朋友的屏幕 朋友的屏幕

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

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

HTML 代码:

0 投票
2 回答
4308 浏览

css - rem, px, 浏览器的媒体查询 >=IE9

我有一个项目,其中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

0 投票
1 回答
80 浏览

css - 为什么我的 3em div 比我的 3em 渐变图案小?

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

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

CSS ----->

0 投票
1 回答
458 浏览

javascript - javascript 和 EM

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

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

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

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

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

很想听听你的想法!

谢谢

0 投票
2 回答
177 浏览

html - Em 的边距在不同字体大小的元素上是不同的

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

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

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

0 投票
1 回答
804 浏览

jquery - jQuery 根据字体大小调整 EM 中窗口宽度的大小:100%

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

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

0 投票
3 回答
6175 浏览

html - 在 Chrome 中使用 em 单位的问题

在 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.1emfont-size: 0.2em因为两者都小于这个神奇的最小值....

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

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

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

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

更新:

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

在此处输入图像描述

0 投票
1 回答
1119 浏览

css - 为什么在浏览器现在可以正确缩放时使用 em 填充和边距?

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

0 投票
2 回答
901 浏览

google-chrome - 在使用 62.5% 和 em 设计时摆脱 12px 的 chrome min font size

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

0 投票
3 回答
227 浏览

html - 如果父母的字体大小很大,如何摆脱跨度以上的空间?

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

在此处输入图像描述

来源(http://jsfiddle.net/rapik/w87m7/2/):

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

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

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