江苏龙网

  1. 首页 > 生活 > >

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

首先， 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 中没有此限制。
■网友
正常啊，是你 1em 计算出来的 px 太小了吧。Chrome 里面 setting 去掉 12px 限制试试。demo：http://jsfiddle.net/yujiangshui/ajs0q0m2/


    推荐阅读


    上一篇：想学习大数据 ，零基础应该怎样学习，从哪方面入手

    下一篇：大唐天下公司c+商业模式到底是干啥子