问题标签 [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 投票
2 回答
2215 浏览

css - CSS“em”问题:避免缩放到特定元素的字体大小

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

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

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

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

我的 CSS 中有特定的代码:

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

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

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

如何取消激活此属性,以便在上面的示例中 2 个按钮具有相同的边距?(无需重新计算尺寸;这就是我现在正在做的事情!)

0 投票
0 回答
106 浏览

css - Resize svg file in steps to avoid blurriness

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)

enter image description here enter image description here

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

0 投票
1 回答
206 浏览

css - EM 单元如何有助于响应式设计

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

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

  2. 哪个好%em

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

0 投票
2 回答
941 浏览

jquery - 让 jQuery 用 em 而不是 px 来测量

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

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

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

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

0 投票
1 回答
1678 浏览

css - CSS 使用 em 单位。div 父元素中图像大小的一半

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

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

0 投票
3 回答
1115 浏览

css - 在 ems 中创建两个大小相同但字体大小不同的 div

我一直在阅读 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

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

0 投票
1 回答
721 浏览

css - 在chrome中使用REM,无法重现错误

正如标题所说,我正在尝试在页面的所有元素上使用带有 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为基础。

0 投票
1 回答
42 浏览

html - CSS EM 测量搞砸了?

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

CSS 代码:

HTML 代码:

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

0 投票
0 回答
1196 浏览

spacing - 字母间距转换 px 到 em

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

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

我正在使用 72px 字体..

0 投票
4 回答
2097 浏览

html - 如何将 em 设置为 10px 以获得完整的网站

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