font-size 的 px em 与 rem

地址:http://www.usity.org/?p=1950

之前有看到说 px em 区别是 px 在 ie 里不能放大,但是我用 ctrl 滚动鼠标放大页面,文字是可以放大的嘛,实际上,这个放大文字,是指浏览器自带的
文字大小 的调整功能,并不是放大整个页面。

在ie中,调整文字的功能是这个:

1

OK,那么一切就明了了。 如果使用 px 作为字体大小的单位,那么在 ie 下边,当通过上述方法在浏览器中设置大字号的文字 并不能生效,即使在 ie9
中也不能。

任何默认浏览器的字体大小都是 16px ,当设置 body 的 font-size:62.5% 的时候, 1em = 10px; 1.2em =
12px;

em 单位的特点:

  • em 值不是固定的

  • em 会根据父级元素的大小来进行计算;

使用 em 时候有个很严重的问题,看代码:

body { font-size:62.5%; } 
h1 { font-size: 2.4em; } /* =24px */ 
p  { font-size: 1.4em; } /* =14px */ 
li { font-size: 1.4em; } /* =14px? */ 

如果一个 li 中又出现了一个列表 ul  li ,那么这个 li 将会是 20px,如果其中再嵌套了一个 ul li,这将会是一种噩梦...

所以,在 css3 中,提出了一个新的单位来解决这个问题: rem  ( root em )

根据根元素来计算em的值; 根元素也就是

所以代码可以是:

html { font-size:62.5%; } 
h1 { font-size: 2.4rem; } /* =24px */ 
p  { font-size: 1.4rem; } /* =14px */ 
li { font-size: 1.4rem; } /* =14px */ 

问题解决了,世界清静了  font-size 的 px em 与 rem

注: opera 尚不支持 rem; ie9、chrome、firefox、safari 都已经支持 rem;

参考链接: 
http://snook.ca/archives/html_and_css/font-size-with-rem

转载于:http://note.rpsh.net/posts/2011/05/03/font-size-px-em-rem

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

使用新浪微博登陆