问题标签 [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.
css - em 宽度的奇怪行为
我目前正在尝试学习自适应/移动网页设计,其中涉及针对不同平台和分辨率的媒体查询,在设计中使用 em 而不是 px 等。我目前正在尝试将两个 em-width 元素彼此相邻放置;我的内容旁边的导航/信息栏。
我已将信息栏设置为 16em 宽(根据字体大小转换为每 em 16px),内容为 calc(100% - 17em) 宽。我认为这应该在菜单和内容之间留下 1em 的边距,无论我缩放和调整窗口大小,但最终结果不同意:
100% 缩放
25% 缩放
朋友的屏幕
元素之间的空间因缩放级别而发生很大变化,尽管一切都普遍使用“em”单位,并且相关元素之间的字体大小没有改变。可能是什么问题?
信息:我正在使用媒体查询将导航从水平对齐过渡到侧边栏。正在运行的是查询的版本。在查看 CSS 时请记住这一点。这可能是问题的一部分,尽管我严重怀疑它......
HTML 代码:
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
css - 为什么我的 3em div 比我的 3em 渐变图案小?
大家圣诞快乐,今年我又开始冒险了。我试图让我的一个随机绿色盒子变成一个红色盒子。我使用渐变图案来生成绿色条纹,但我的红色框更小,即使它们都是 3em!到底是怎么回事!!!
请看我的 codepen 交易: http ://codepen.io/githubmaht/pen/jinHo
CSS ----->
javascript - javascript 和 EM
我想知道人们对完全基于 EM 的想法是什么?就我个人而言,我几乎完全同意它,字体大小,布局,媒体查询等等。与用户的个人偏好相关是非常有意义的。
但是,当涉及到 javascript 时,似乎很难使用像素以外的任何东西。
例如,如果我想在屏幕尺寸大于某个尺寸时添加图像,我可以在 HTML 中执行此操作:
或者,在 js 中,当屏幕到达媒体查询断点时,我可能想要更改某些内容(也许换掉一个元素)。但是,我最终会在 CSS 中得到 EM 和 js 中像素的奇怪混合,如果用户字体大小不是默认值,它们将不匹配。
那有意义吗?有人有什么建议吗?也许 EM 字体和 px 用于布局?但这失去了一些新兴市场的美丽......
很想听听你的想法!
谢谢
html - Em 的边距在不同字体大小的元素上是不同的
我正在与使用 EM 而不是 PX 的 Zurb Foundation (v4) 合作。
我发现使用 EM 的一个缺点是元素的边距由 $column-gutter 设置(例如 0.9375em)如果元素的字体大小不是 1em(例如 0.875em),则该元素的边距更小(因为 ems 是相对于字体大小的)而不是其字体大小为 1em 的元素。
因此,如果我将 2 个元素彼此相邻,则两者的实际边距结果是不一致的。即使元素的字体大小不同,我也真的想保持元素的边距一致。有没有一种聪明的方法来实现这一点(不使用 px)?
jquery - jQuery 根据字体大小调整 EM 中窗口宽度的大小:100%
我已经看得很远了,无法弄清楚这一点。我有几个元素需要根据标题的高度进行调整,并且使用 CSS 进行调整是一件很痛苦的事情,因为标题发生了变化,所以我需要一些不会隐藏目标内容的东西,当标题是粘性的并且标题只粘在最小宽度 62em。如果我将“62em”更改为“992”,它可以在我的 1 像素设备(我的桌面)上正常工作,但我需要调整大小才能在 62em 上触发。
基于第一个答案,这是错误的,但对我有很大帮助,这似乎可以解决问题:
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.1em
,font-size: 0.2em
因为两者都小于这个神奇的最小值....
这是一个错误还是我做错了什么?
这种特殊情况可以通过将“bbb”类的所有值乘以 10 来解决。但在我的情况下,事情更复杂,我需要这个font-size: 0.1em
。
我正在使用 em 单位来构建可扩展的控件。我的控件有根 div 和多个子元素。这个想法是使用 em 设置所有值,并且 em 的运行时大小由根元素的字体大小控制。如果一个元素定义了字体大小,那么它的 em 将取决于它。
我将不胜感激任何想法或建议!
更新:
以下是我所说的不同输出的屏幕截图:
css - 为什么在浏览器现在可以正确缩放时使用 em 填充和边距?
我一直在想这个问题一段时间,并创建了一个像素版本和 em 版本来比较放大时的差异 - 没有。我读过的大部分内容都说“你需要将它们制作成 em 以实现可扩展性”,但我认为现在所有现代浏览器都可以正确扩展,这是一个有争议的问题。只要您将 CSS 中的基本字体大小设置为 ems/rems,以像素编写的填充和边距就会相应地缩放,就像它们是 ems 一样。我错过了什么吗?
google-chrome - 在使用 62.5% 和 em 设计时摆脱 12px 的 chrome min font size
当我们在包装器或 body 元素中使用 62.5% 或 10px 作为基本单位时,子节点可以更简单地使用 em 单位。然而,chrome 的最小字体大小为 12px 使得 62.5% 的设计失败。如果我们使用 12px 作为基本单位,就会使 em 计算变得困难。我想到的方式是使用20px作为基本单位,那么内部节点中的em单位可以将原始像素大小除以20。在响应式设计中解决这个问题的常用方法是什么?
html - 如果父母的字体大小很大,如何摆脱跨度以上的空间?
我遇到了一个父 DOM 元素具有相当大的 em 值的情况。问题是所有内联子元素在它们上方都有很大的边距,即使它们的字体大小要小得多:
来源(http://jsfiddle.net/rapik/w87m7/2/):
我怎样才能在不改变字体大小的情况下摆脱这个差距?我也不想将元素的显示类型更改为“块”。
我试过改变行高但没有成功。
PS 如果您想知道,为什么我需要这个:Chrome 有一个“功能”,可以防止字体大小在任何时候小于 6 像素。所以我将所有值乘以十并得到了这个问题。对应问题:Chrome中使用em单位的问题