html的px显示不同,HTML：不同的浏览器在不同的实际px大小渲染1em有多常见？(HTML: How common is it that different browsers render 1e...

HTML：不同的浏览器在不同的实际px大小渲染1em有多常见？(HTML: How common is it that different browsers render 1em at a different actual px size?)

如您所知，您可以使用px或em指定CSS的尺寸。 据我所知，em表示“当前元素的字体的行高”。 我目前的做法是始终使用px(也是为了保证金，这似乎是一个有争议的做法)。

问题： 我可以依靠px和em的比率在不同浏览器中保持一致吗？ 如果不是，那么我手动指定的段落之间的边距可能会显得很奇怪，因为它们不再匹配1em。

我相信最好使用em作为边距，但我有相当多的现有代码总是使用px边距。

As you know, you can specify dimensions with CSS in px or em. As far as I understand it, em means "line height of the current element's fonts". My approach currently is to always use px (also for margin which seems to be a controversial practice).

Question: Can I rely on the ratio of px and em to be the same across browsers? If not, then my manually specified margins between paragraphs will likely look odd because they so not match 1em anymore.

I believe that it is better to use em for margins but I have quite a base of existing code that always uses px margins.

原文：https://stackoverflow.com/questions/3729172

更新时间：2020-01-07 16:36

最满意答案

不 ，你不能。

像素大小与您使用的字体类型和大小，屏幕分辨率(取决于操作系统，浏览器)以及可能的操作系统和浏览器设置有关 - 例如“显示字体+ 10％”可能会改变em值。

No, you cannot.

The size of em in pixels is related to the font type & size you're using, the resolution of your screen (depending on OS, browser), and possible further OS and browser settings - eg "Show fonts +10%" may alter the em value.

相关问答

不，您不能，因为在媒体查询中，“媒体查询中的相对单位基于初始值，这意味着单位绝不会基于声明结果。 例如，在HTML中，'em'单位相对于'font-size'的初始值。“(Media Query spec，第6章单位 )。 font-size的初始值是medium ，它以浏览器相关的方式映射到物理大小(独立于您可以在CSS中设置的任何内容)。 结论取决于你如何设置字体大小。 如果您以像素为单位设置根元素的字体大小，则在媒体查询中使用像素也是合乎逻辑的，因为em的使用不会提供任何灵活性。 如果您将根

...

如W3C CSS2 Fonts文档中所述：

A keyword is interpreted relative to the table of font sizes

and the font size of the parent element. Possible values are: [ larger | smaller ].

For example, if the parent element has a font size o

...

说一个是比另一个更好的选择是错误的(或者两者都不会在规范中被赋予自己的目的)。 甚至可能值得注意的是，StackOverflow广泛使用px单位。 被告知这不是糟糕的选择。 单位的定义 px是一个绝对的测量单位(如， pt或cm )，也恰好是单位的1/96(更多的是为什么稍后)。 因为它是一个绝对的测量，它可以在任何时候想要定义一些特定的大小，而不是与浏览器窗口的大小或字体大小成比例。 像所有其他绝对单位一样， px单位根据浏览器窗口的宽度不会缩放。 因此，如果您的整个页面设计使用绝对单位，如px

...

正如@Pedro_Costa所述，.ol-touch风格仅在某些浏览器中触发，这会使字体变得更大，如下面的CSS规则所示： ol-touch .ol-control button{font-size:1.5em}

所以，问题在于Open Layers仅在某些浏览器和操作系统中检测触摸功能。 检查我看到的OpenLayers代码： ol.has.TOUCH = ol.ASSUME_TOUCH || 'ontouchstart' in window;

这看起来没问题。 所以，显然这是Linux中的

...

不 ，你不能。 像素大小与您使用的字体类型和大小，屏幕分辨率(取决于操作系统，浏览器)以及可能的操作系统和浏览器设置有关 - 例如“显示字体+ 10％”可能会改变em值。 No, you cannot. The size of em in pixels is related to the font type & size you're using, the resolution of your screen (depending on OS, browser), and possible furt

...

px也可以在IE中调整大小。 em是由父元素继承的大小的相对大小，实际上与％具有相同的含义。 我不认为你可以通过使用em而不是px来获得任何优势。 px can be resized in IE as well. em is a relativ size to the inherited size by it's parent element and actually has the same meaning as %. I don't think you can take any advanta

...

看来这个： 使用： font: 1em/1.5em bold italic serif;

代替 font-size: 1em;

line-height: 1.5em;

font-weight: bold;

font-style: italic;

font-family: serif;

这是CSS的速记属性 It seems this: Use: font: 1em/1.5em bold italic serif;

instead of font-size: 1em;

line-height:

...

移动浏览器处理font-size完美地定义像素，因为它们用于渲染不是通常的物理像素而是屏幕像素。 类似的问题有相同的答案： “当在现代移动浏览器上缩小屏幕时，px将不是真正的实际像素。 这些浏览器有效地模拟了具有桌面浏览器大小像素的桌面浏览器。“ 我完全同意这个说法 Mobile browser handle font-size defining with pixel perfectly, because they are using for rendering not usual physic

...

内容与我的“像素完美”网格不匹配。 如果您正在使用像素完美网格，请使用像素值。 em是一个相对值，只有在布局能够适应不同的内容大小时才能正常工作。 the content didn't match my "pixel-perfect" grid. If you're working with a pixel-perfect grid, use pixel values. em is a relative value that works well only if the layout is abl

...

百分比高度相对于第一个position: relative容器，或者如果它们都不是html / body标签高度。 我的猜测是你没有在父容器上指定高度，所以20％没有你想象的那么大。 看看父容器的高度是什么，并添加一个position: relative对于它。 然后将#page-header height百分比设置为父容器的必要比例。 如果父容器是html

元素，那么试试这个： html, body {

height: 100%;

}

Percentage heights

...