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

html - em的上下文是什么?

在这个例子中:

CSS

HTML

“toad”这个词是 0.5 乘以 16px(浏览器的标准字体大小)还是 0.5 乘以 2em(h1 的字体大小)?

0 投票
3 回答
4482 浏览

css - 字体大小 10px 无法应用,始终为 12px

简单的代码,但在 chrome 中字体大小始终为 12px,在 IE 中为 10px。对于大于 12 的 px,可以更改。但是对于 12 岁以下的 px,它不能更改....如何解决这个问题?

0 投票
2 回答
2129 浏览

html - 继承相对行高时,它与元素的字体大小无关。为什么?我如何使它相对?

我有一个全局重置,为每个元素设置和设置 font-sizeline-heightinherit

对于html,我明确定义它们:

请注意,这line-height是以相对单位设置的。

对于h1,我定义了不同的字体大小:

我希望h1继承line-height. 1.25em生成的 line-height 应该等于 80px (16×4×1.25)。

但实际上h1'line-height仍然等于20px(与html's 相同:16×1.25=20)。

说,我有以下 HTML:

结果截图:

相对行高被错误地继承 http://jsfiddle.net/M3t5y/5/

要解决这个问题,我必须明确定义h1'sline-height等于它继承的相同值:

然后line-height变得正确:

通过显式提供行高而不是继承它来解决问题 http://jsfiddle.net/M3t5y/6/

看起来是先将相对值计算成绝对值,然后再继承绝对值。或者,它可能是相对于父级的font-size,而不是元素的font-size

问题

  1. 为什么亲属line-height继承不正确?
  2. 如何使相对line-height值被继承为相对于元素font-size而不是其父元素的值?

PS 标题中有一个问题类似的问题,但细节上有所不同。

0 投票
1 回答
423 浏览

css - Initial-scale vs. desktop.css+phone.css+tablet.css?

I just discovered the initial-scale meta attribute.

Previously, I've been using a default.css to define all my styles and sizes (for fonts and elements) so they appear nicely on screen real estates of desktop computers. Then I might use media queries or PHP to include an phone.css or tablet.css if you're using a phone or tablet, and this will adjust ONLY SIZES for smaller devices.

But now that I've become aware of the concept of initial-scale, should I be using that instead to control sizes of elements?

A very important consequence I'm trying to get at is this...I use to define my font sizes with EM (or REM) units like this:

In other words, my phone.css and tablet.css only adjusts the font-size percentage on the html element, and all other elements will scale accordingly on all different devices. To a certain degree, i do this wiht padding, margins, lineheights and letterspacing.

With the introduction of initial-scale, does that mean EM/REM units are irrelevant for scaling font sizes? We can stick to the much more intuitive PX units? And let initial-scale do the rest of the scaling work?

0 投票
2 回答
4161 浏览

css - CSS:Em 舍入错误

最近,我为我正在制作的网站重写了 CSS 文件,并尝试使用 em 而不是 px 使大多数元素和字体的大小动态化。尺寸工作..有点,但至少有一个问题。

当使用 em 单位作为框的边距时(边距:0.25em),在 Firefox 中,我在顶部/左侧得到 4px,在右侧/底部得到 3px - 基于 14px 字体大小(实际上是盒子的字体 -浏览器 16px 的 0.875em)。

现在,我是 em 新手,很可能我误解了几件事,但根据我的理解,我认为 14px 的 0.25em 是 3.5px。如果是这种情况,并且舍入是边距中 4 或 3 个像素的原因,这真的是它应该如何工作的吗?具有舍入结果的某个计算每次都应该以完全相同的方式舍入,不是吗?此外,在 Internet Explorer 中,情况正好相反:上/左为 3 像素,右/下为 4 像素。我尝试将值更改为 0.286em(x 14 像素 -> 4.004 像素)以避免恰好为半个像素,而这结果在 Firefox 中为 4/4/4/4,但在 IE 中为 4/3/4/3。

除了这些像素错误之外,更改浏览器字体大小实际上可以很好地缩放所有内容。

我疯了,我误解了什么,两个浏览器都坏了还是......什么?(使用 IE8 和 FF3 和 19。)

0 投票
1 回答
75411 浏览

css - 为什么字体大小不变?

我想用 设置字体大小em,而不是px。这是我的代码:

我想将div字体大小设置为 12px,但它看起来比我想象的要小,我div用 chrome 浏览器工具禁用了样式,它看起来没有任何变化。为什么以及如何使div字体大小为 12px?谢谢。

0 投票
2 回答
1518 浏览

css - Rem/Em 混乱

我今天在一个新网站上使用 em's/rem's 玩了一会,有几件事我想在这里讨论/询问。

多年来,我完全是一个基于像素的人,在需要时会投入一些百分比。

我一直在阅读 em 和 rem 是网络应有的“方式”。足够公平,这就是我今天试一试的原因。

所以,第一件事。使用 em's/rem's 的尺寸是否只是为了改变事物相对于主要字体大小的尺寸?

如果是这样,那么您会在什么情况下更改主要字体大小?我一直将我的设置为 16px 并使用它。

我找到了一个 Sass mixin,它允许我以像素为单位指定任何属性的尺寸,并使用 rem 和基于像素的后备输出它。不过,我先根据自己的喜好对其进行了调整。

因此,我开始使用 rem mixin 为我的所有维度(边距、填充和一些高度)构建站点。是的,当我更改主要字体大小时,所有内容都会缩放,但同样的问题与此处的第 2 个问题相同。

我使用 Compass Susy 来设置我的网格并使用 em 来指定它的设置,(我通常会选择像素)。我将 Susy 中的网格样式设置为魔术网格,当浏览器比网格宽但内部完全灵活时,它使网格保持静态。

当然,我所读到的关于使用 em 的好处的所有内容都可以使用媒体查询来完成吗?你们做什么,最重要的是主流网站使用什么?

对,接下来的两个问题是关于图像的。我今天遇到了两种情况,在等式中的某处使用带有图像的 em/rem 会导致问题。

5a。我将 h2 设置为内联块并在周围添加了填充,然后在右侧添加了相当于 45px 填充的 rem。我将 line-height 设置为 1.3 的无单位值。然后,我将图像设置为 h2 的背景,使其出现在右侧以出现在 padding-right 中。在 16px 的标准基本字体大小下,一切都很好。但是,我增加或减少了字体大小,并裁剪了图像的顶部和底部。所以又问了2个问题。我明白为什么图像会被裁剪,但这是如何处理 em/rem 和困扰我的图像之间的关系。

5b。我有一个高度设置为 200px 高度的 rem 高度的 div。然后我在其中添加了一个高度为 200 像素的图像。使用 susy mixin span-columns 将图像的宽度设置为特定的列宽,并将高度设置为自动。当字体大小改变时,我要么最终得到一个太高或太短的图像。在这种情况下,最好的办法是什么?

我正在查看一些可用的指南针 mixin,例如这个:

我不能在里面添加我所有的 em/rem 东西吗?

我认为最重要的问题是:

为什么首先需要 em/rem?在图像方面,您如何与他们合作?有什么想法吗?

0 投票
1 回答
2812 浏览

responsive-design - Using em's in responsive design

I've created a responsive site and want to use em's to control the font size.

I've set the body font base size to 64.5% as recommended to create a base of 10px.

However, though the sizing seems OK, it does not change with the size of the browser. What am I missing?

http://jsfiddle.net/XaUz9/

0 投票
2 回答
257 浏览

css - 使用 em 表示标题

我是使用 em 的新手。到目前为止,我一直使用 px,但现在该继续前进了。我被我的标题困住了。我有一个 H2 和一个 H6 样式相同

当我将两个标题放在同一个父元素中时,它们以不同的大小显示。这怎么可能?它们是相对于父级还是相对于它们自身的默认字体大小。

谢谢

http://jsfiddle.net/SBAHa/1

0 投票
2 回答
750 浏览

html - em 定义中的“当前选择的字体大小”是什么?

在这个问题中:为什么用 em 而不是 px?在最佳投票的答案中,em定义为:

em 不是一个绝对单位——它是一个相对于当前选择的字体大小的单位。除非您通过使用绝对单位(例如 px 或 pt)设置字体大小来覆盖字体样式,否则这将受到用户浏览器或操作系统中字体选择的影响(如果他们已经制作了字体),因此没有意义使用 em 作为一般长度单位,除非您特别希望它随着字体大小的缩放而缩放。

当您特别希望某物的大小取决于当前字体大小时,请使用 em。

我的网站主页中,我在页面标题(网站名称)中有一个字体大小等于 2.1 em 的h1标签,它看起来小于字体大小等于 1.9 em 的h2标签。以下屏幕截图演示了使用 Google Chrome 浏览器的情况:

在此处输入图像描述

我的问题是:在em定义中考虑的当前字体大小是什么意思?换句话说,我怎么知道当前的字体大小?