我查看了所有答案以及您对它们的 cmets，我觉得您希望将 em 和 ch 单位主要用于 width 或 height 属性。
[...] 那么它们不适合设置字段宽度吗？
从我的角度来看，我不建议这样做。
CH-单位
首先，我以前从未与ch 合作过，老实说，我认为它没有任何实际用途- 可能是今年的input，所以总有四个数字的宽度，但不会更多 - 因为它永远不会准确告诉您元素最终的宽度。
我改变了主意，现在我看到了 ch 的真正用途。 :)
input 的年份示例，因此始终存在四个数字的宽度，将继续存在。但是ch 对于正确定义段落的文本宽度也非常有用。
使用像素、相对值或百分比值非常困难 - 特别是对于响应式设计 - 设置每行的完美文本宽度，包括段落的间距。但是，这可能是网站用户体验的责任。 Atlassian Design 的摘要是绝配：
设置适合读者的阅读环境。大行文字难以阅读，使人们更难集中注意力。虽然没有正确的方法来衡量文本的完美宽度，但一个好的目标是每行包含 60 到 100 个字符，包括间距。设置最佳行长将内容分解为易于消化的块。
来源：Atlassian Design
这是ch 可以完美地作为一个单元使用的地方。为了更好地了解，您可以查看最后的示例。
但现在终于要定义ch ;)
正如人们常说的，ch 是指0 字符的宽度与其字体大小的比值。
例如：正文有一个font-size: 16px，而0 字符的宽度是来自所选字体系列的10px，那么1ch 等于10px。即使这样仍然不准确，因为例如italic 或bold 可以改变字符的宽度。
EM 和 REM 单位
正如人们常说的，em - 并且要多带一位玩家- 也rem 是相对于font-size 而言的。
其中rem总是相对于根元素font-size，em相对于自身元素或最后一个父元素的font-size（也可以是根元素） em> 带有font-size。
如em 示例：只有body 有font-size: 16px; 而元素本身没有font-size，则1em 等于16px。如果元素的父元素或元素本身得到font-size: 20px;，则1em 等于20px。 em 单位也可以自我繁殖。
如rem 示例：body 有一个font-size: 16px;，那么1rem 等于16px。即使元素本身或父元素得到了font-size: 20px;，1rem 仍然等于16px 的body 设置。
[...] 如果 ch 在字体中是 '0' 的大小，为什么 em 在字体中不是 'M' 的大小 [...]
em 最初是基于当前字体M 字符的排版测量，但这已经过时了。正如您现在看到的，它总是引用“固定起始值”而不是字符的宽度。
推荐用法
正如我所说，从我的角度来看，我不建议将ch、em 或rem 用于width 或height 属性。这些单位对于“文本”属性更有用。
一些例子：
- 所有
h2 应该是文本的四倍：font-size: 4rem;
- 所有
p 应该总是有一个半行的margin：margin-bottom: 0.5em;
- 元素的
line-height 应该比font-size 大20%：line-height: 1.2em;
- 一年的
input，应该总是有四个数字的width：width: 4ch;
-
p 的文本宽度应始终为每行 80 个字符的宽度，包括间距：width: 80ch;
但像素在处理不同设备时并不灵活
为此，作为结论，我建议您简单地使用百分比width: 80%; 或视口宽度和视口高度height: 100vh; width: 100vw;。或者至少总是有一个最大值：width: 1000px; max-width: 100%;。
这里有一些 sn-ps - 仅用于具有 width 属性的示例- 以便更好地理解：
em - 相对于自身元素的字体大小或具有字体大小的最后一个父元素
body {
font-size: 16px;
}
p {
font-weight: bold;
}
div {
width: 1em;
height: 50px;
background: lightgray;
}
.em-0-5 {
width: 0.5em;
}
.em-10 {
width: 10em;
}
.fs-10 {
font-size: 10px;
}
.parent {
font-size: 0.5em;
}
.parent div {
width: 10em;
}
<p>1em (body font-size * 1 = 16px)</p>
<div></div>
<p>0.5em (body font-size * 0.5 = 8px)</p>
<div class="em-0-5"></div>
<p>10em (body font-size * 10 = 160px)</p>
<div class="em-10"></div>
<p>10em from 10px own element font-size (element font-size * 10 = 100px)</p>
<div class="em-10 fs-10"></div>
<p>10em from 0.5em parent font-size (body font-size * parent font-size * 10 = 80px)</p>
<span class="parent">
<div></div>
</span>
rem - 相对于根元素的字体大小
body {
font-size: 16px;
}
p {
font-weight: bold;
}
div {
width: 10rem;
height: 50px;
background: lightgray;
}
.parent {
font-size: 20px;
}
.parent div {
width: 5rem;
}
<p>10rem (body font-size * 10 = 160px)</p>
<div></div>
<p>5rem in a parent element with font-size 20px (body font-size * 5 = 80px)</p>
<span class="parent">
<div></div>
</span>
ch - 相对于“0”的宽度（零）
body {
font-size: 16px;
}
p {
font-weight: bold;
}
input {
width: 4ch;
}
div {
width: 20ch;
background: lightgray;
word-wrap: break-word;
}
.ch-1 {
width: 1ch;
}
.ch-5 {
width: 5ch;
font-size: 32px;
}
<p>4ch (space of 4x zero character)</p>
<input type="text" value="2018" />
<p>20ch (space of 20x zero characters)</p>
<div>0000000000000000000000000</div>
<p>Also 20ch (space of 20x zero characters)</p>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et </div>
<p>1ch (space of 1x zero character)</p>
<div class="ch-1">00000</div>
<p>5ch from font-size 32px (space for 5x zero characters with a font-size of 32px)</p>
<div class="ch-5">0000000000000000000000000</div>