【CSS响应式设计】chrome中 em 不能随font-size基准值变动？

正常啊，是你 1em 计算出来的 px 太小了吧。Chrome 里面 setting 去掉 12px 限制试试。

demo：

首先， em 对于 width等属性也是有效的。一个元素 width 以 em 为单位时，最终在浏览器中的宽度是以元素自身的 font-size 为基准。即 font-size 乘以 em 值。

题主在问题中的描述就存在问题，因为题主给的例子中，body 的font-size 分别为 100% 和 30% 时， .aaa 的大小并不一致，也就是『不固定』。

真实的现象是：

body 的 font-size 从 100% 到 75%，.aaa的大小是在变小的。而 75% 以下就固定了。

以 30% 为例，这是我在 Chrome 中测试得到的结果： aaa 的字体大小为 12px，宽度为240px。

Chrome 有一个特点：font-size 最小不能低于 12px，如果你把元素的 font-size 设为 10px，8px 等，最终在 Chrome 中它都是 12px。

.aaa 的字体大小继承自 body，body 的 font-size 为 30%，这个值经过计算（16px * 30%）是小于 12px 的。（75% 正好等于 12px），所以 .aaa 的 font-size 被 Chrome 计算为 12px。

所以 .aaa 的宽度就是 12px * 20 = 240px。

Firefox 中没有此限制。