在web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说px做单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-size:em vs. px vs. percent 这样的PK大局.不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用,真是进也难,退也难.
最近在学习em的相关知识的时候,无意之间让我拾得一宝,就是使用rem来设置web页面
在详细介绍rem之前,我们先来一起来回顾一个我们常用的两种记量单位,也是备受争论的两个:
-PX为单位
-EM为单位
--PX为单位
在web页面初期制作中,我们都是使用"px" 来设置我们的文本,因为他比较稳定和精确,但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的web页面时,他改变了浏览器的字体大小,这时会使我们的web布局被打破.这样对于那些关心自己网站可用性的用户来说,就是一个大问题了,因此,这时就提出了使用"em"来定义web页面的字体.
--em为单位
前面也说了,使用是"px"为单位是比较方便,而又一致,但在浏览器中放大或缩放浏览页面时会存在一个问题,要解决这个问题,我们可以使用"em"单位.
这种技术需要一个参考点,一般是以<body>的"font-siez"为基准.比如我们使用"1em"等于"10px"来改变默认值"1em = 16px",这样一来,我们设置字体大小相当于"14px"时,只需要将其值设置为"1.4em"
eg:
body{
font-size:62.5%;/10 / 16 x 100% = 62.5%
}
h1 {
font-size:2.4em;// 2.4em x 10 = 24px
}
em有个问题,它是相对于父元素的,
1 / 父元素的font-size x 需要转换的像素值 = em值
这样的情况下"1.4em"可以是14px,也可以是 其它,总之是一个不确定的值,那么解决这样的问题,要么你知道其父元素的值,要么在任何子元素都使用"1em",这样一来可以又不是我们所需要的方法.
=============
Rem为单位
CSS3的出现,同时引进了一些新的单位,包括我们今天所说的rem,在W3C官网上是这样描述rem的 ----"font size of the root element".下面我们就一起来详细的了解rem
前面说了"em"是相对于其父元素来设置字体大小,这样就会存在一个问题,进行任何元素设置,都可能需要知道他父元素的大小,我们多次使用时,就会带来无法预知的错误风险.而rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,在根元素中设置多大字体,这完全可以根据您自己的需要,也可以参考下面的对照表:
=====================
Pixels EMs Precent Points
6px 0.375em 37.5% 5pt
7px 0.438em 43.8% 5pt
8px 0.5em 50% 6pt
9px 0.563em 56.3% 7pt
10px 0.625em 62.5% 8pt
11px 0.688em 68.8% 8pt
12px 0.75em 75% 9pt
13px 0.813em 81.3% 10pt
14px 0.875em 87.5% 11pt
15px 0.938em 93.8% 11pt
16px 1em 100% 12pt
17px 1.063em 106.3% 13pt
18px 1.125em 112.5% 14pt
19px 1.188em 118.8% 14pt
20px 1.25em 125% 15pt
21px 1.313em 131.3% 16pt
22px 1.375em 137.5% 17pt
23px 1.438em 143.8% 17pt
24px 1.5em 150% 18pt
===================
eg:
html{
font-size:62.5%;//10 / 16 x 100% = 62.5%
}
body{
font-size:1.4rem;//1.4 x 10px = 14px
}
h1{
font-size:2.4rem;//2.4 x 10px = 24px
}
我在根元素<html>中定义了一个字体为62.5%( 也就是10px. 设置这个值主要方便计算,如果没有设置,将是以"16px"为基准).从上面的计算结果,我们使用"rem"就像使用"px"一样的方便,而且同时解决了"px"和"em"两者不同之处.
浏览器的兼容性
rem是CSS3新引进来的一个度量单位,大家心里肯定会觉得心灰意冷,担心浏览器的支持情况.
其实大家不用害怕,你可能会惊讶,支持浏览器还是蛮多的,比如:Mozilla Firefox 3.6+ Apple Safari5+ Gool Chrome IE9+ 和 Opera11+.
只是可怜的IE6-8无法,你们就把他们当透明了吧,我向来都是如此
不过使用单位设置字体,可不能完全不考虑IE了,如果你想使用这个REM,但也想兼容IE下的效果,你可考虑"px"和"rem"一起使用,用"px"来实现IE6-8下的效果,然后使用"Rem"来实现代浏览器的效果.就让IE6-8不能随文字的改变而改变吧,谁让这个IE6-8这么老呢
网友评论