那些在调整字体大小时使用em的人会知道在处理嵌套元素时他们会很头疼,并且必须进行px - > em计算(以确保你的设计解释正确@ 100%)会消耗额外的时间.

考虑到这些(当然是次要的)问题,并且考虑到主要浏览器在本地处理页面缩放/缩放等可访问性问题方面取得的最新进展,是否正在使用em来调整仍然值得考虑的字体？*

*排除旧版浏览器(IE6)支持.

在深入研究CSS单元时,我遇到了参考像素的定义.但是,我无法找到与CSS像素单元关系的一致而全面的描述.我已就这件事做了一些研究,但对我来说还是有点不清楚.

1.收集信息

1.1像素定义

像素有两种不同的类型/定义:

"设备像素" - 显示器上的单个物理点.

和:

CSS像素 - 与参考像素最匹配的单位.[ 1 ]

同名的两个平行概念肯定不能澄清混淆.我完全理解引入第二个目的的目的,但我发现它的命名法误导了.CSS像素被归类为绝对单位,并且:

"绝对长度单位相对于彼此固定." [ 1 ]

除了像素之外,上述声明似乎对于每个单位都非常明显.遵循w3c规范:

"对于CSS设备,这些尺寸要么锚定(i)通过将物理单元与其物理测量相关联,或者(ii)通过将像素单元与参考像素相关联来锚定.

(...)请注意,如果锚单位是像素单位,则物理单位可能与其物理测量值不匹配.或者,如果锚单元是物理单元,则像素单元可能不会映射到整数个设备像素."[ 1 ]

考虑到上述引用,我假设绝对单位不是绝对的,因为它们可以锚定到参考像素.

1.2参考像素

参考像素本身实际上是角度测量[ 2 ]:

"参考像素是设备上一个像素的视角,像素密度为96dpi,距离读取器的臂长度.对于标称臂长28英寸,视角约为0.0213度." [ 1 ]

图片如下图所示:

尽管将参考像素定义为视角,我们可以进一步阅读:

"对于手臂长度的读数,1px因此对应于约0.26毫米(1/96英寸)."

抛开不一致之处,我们可以建立角度值:

? = 2 * arctan(0.026/142) = 0.02098°

where:
    ? — a value of the visual angle

因此,显示单位的大小等于:

y = 2x * tan(0.01049°)

where:
    y — a displayed unit size
    x — a reading distance

鉴于上述公式,为了计算单位大小,我们需要确定实际阅读距离是多少.由于用户可能会有所不同,因此其分类基于设备的DPI.

1.2.1 DPI

为方便起见,让我们假设DPI == PPI. …

有什么区别px,em和ex？当你在CSS中定义font-size时,你会使用px,pt还是em？

很长一段时间我一直在使用

body {font-size:62.5%;}

在CSS文档中,因为它应该是1em平等的10px.但是,我最近注意到在Internet Explorer中我不是这种情况.所以我尝试了代码:

html {font-size:100%}
body {font-size:10px}

现在这对我来说就像一个魅力.我的问题是:

这个解决方案有什么缺点,因为我找不到其他人使用它？

澄清一下:我稍后会指定我的所有字体大小,宽度,高度等em.它只是在我使用的身体10px而不是62.5%.

我还不清楚它们的大小是什么意思？
我在CSS中使用过px,pt.
0.8,1.0和1.2 em意味着什么？
我在CSS中看到了高度:高度:0.8em; 或身高:1.2em;
它是如何计算的？

在我的样式表中,我使用em来表示字体大小.

将此用于填充和边距也是不好的做法,这样当字体缩放边距时,填充将随之缩放？

当我需要使用pt而不是px或em代替pt时,或者无论如何,并且试图找到比36px更大的东西的正确尺寸有时更多的是痛苦. ......比应该的.所以我基本上想让自己成为一个小转换计算器.但是,我似乎无法找到任何区分转换率从一个到另一个的区别对于另一个的相等计数器部分.

我希望我能找到一个可以帮助我的人.基本上我的总体希望是让自己像计算器一样基于jquery的输入.我键入我的px,pt,%,other并选择我的转换类型,然后单击确定.

创建计算,很容易.我必须在每个转换的基础上应用数学,而不是那么多,这就是我希望在这里找到的所以我可以做到.

我有一个名为Dalton Empire的网站.

当用户复制"DaltonEmpire"时,我希望将"Dalton Empire"添加到他们的剪贴板中.

我只找到了一个解决方案; 使用空间,但制作letter-spacing -18px.是不是有一个更简洁的解决方案,例如HTML字符？

我的例子JSFiddle和代码:

span.nospace {
  letter-spacing: -18px;
}

<ol>
  <li>Dalton<b>Empire</b></li>
  <li>Dalton&zwnj;<b>Empire</b></li>
  <li>Dalton&zwj;<b>Empire</b></li>
  <li>Dalton&#8203;<b>Empire</b></li>
  <li>Dalton<span class="nospace"> </span><b>Empire</b> <i>The only one that works</i>
  </li>
</ol>

无论是 HTML、XHTML 还是 HTML5，您都会发现这些令人讨厌的百分比随处可见。然而......我看到很多网站都不敢靠近它们。然而，大学一直鼓励我使用它们。

那么我应该使用哪个？哪个会导致更好的网站设计，为什么？

我知道要避免使用高度，尽管如果我想使用百分比，HTML5 真的不喜欢我不指定高度。

感谢您抽出时间阅读。

使用以下 CSS：

* {
    margin: 0;
    padding: 0;
    font-family:"Segoe UI";
    font-variant: small-caps;
}
.red {
    color: hsl(0, 100%, 50%);
    font-size: 3em;
}
.orange {
    color: hsl(30, 100%, 50%);
    font-size: 3em;
}
.yellow {
    color: hsl(60, 100%, 50%);
    font-size: 3em;
}
.green {
    color: hsl(120, 100%, 50%);
    font-size: 3em;
}
.blue {
    color: hsl(210, 100%, 50%);
    font-size: 3em;
}
.indigo {
    color: hsl(230, 100%, 50%);
    font-size: 3em;
}
.violet {
    color: hsl(274, 100%, 50%);
    font-size: 3em;
}

... * 选择器中的属性工作正常 - …

我创建了一个带有按钮html标签的按钮.现在我正在努力制作高度和宽度.我知道16px等于1em.该规则适用于我迄今为止看到的除按钮之外的所有内容.如果我想按钮高度为45px,按钮将是45px高.如果我想将45px更改为em,那将是2.8125em.它会短得多.为了使它接近45px,它实际上是3.5em左右,在px中实际上是56px.这是为什么？这是一个浏览器问题吗？我顺便使用Safari.