CSS3中的px、em、rem

最近在实习单位写一个自适应网站,要求适应主流手机端。页面很简单,我负责的有4个页面,一天就搞定了,用的@media query方法。但是发现公司有个人用的rem单位来适配不一样的分辨率,导致我们的页面用了不同的方法,从而无法合并在一起(网页由header、content、footer组成,我做的content。最后解决办法是我自己又把foot和head重写了...)。

一、介绍一下css3中的长度单位。

css3中的长度单位有13个:px,em,pt,ex,pc,in,mm,cm,ch,rem,vw,vh,vm;

px:像素(Pixel),相对于设备的长度单位,像素是相对于显示器屏幕分辨率而言的。譬如,WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。 pt:点(Point),标准的绝对长度单位,一般用于印刷业。一英寸=72pt(点)=96px(像素)。 em:相对长度单位,是一个比率。相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体(html)尺寸。结合CSS继承关系使用,具有灵活性。 rem:CSS3 长度单位 rem ,相对于根元素(即html元素)font-size计算值的倍数 ex:相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 pc:派卡(Pica),绝对长度单位。相当于我国新四号铅字的尺寸。 in:英寸(Inch),绝对长度单位。 mm:毫米(Millimeter),绝对长度单位。 cm:厘米(Centimeter),绝对长度单位。 [其中:1in = 2.54cm = 25.4 mm = 72pt = 6pc] ch:CSS3 长度单位 ch ,通常是数字“0”的宽度。 vw:CSS3 长度单位 vw,相对于视口的宽度。视口被均分为100单位的vw。 vh:CSS3 长度单位 vh ,相对于视口的高度。视口被均分为100单位的vh。 vm:CSS3 长度单位 vm ,对于视口的宽度或高度,总是相对于小的那个。视口的宽度或高度被均分为100单位的vm。

下面着重介绍px、em、rem。

二、PX为单位

在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在在不同设备浏览器中浏览我们制作的Web页面,或者在浏览器放大、缩小时,这时会使用我们的Web页面布局被打破。这样对于网站友好度而言,是一个大问题。因此,这时就提出了使用“em”来定义Web页面的字体。

三、em为单位

em是一个相对值,这种技术需要一个参考点,一般都是以的“font-size”为基准。比如说我们使用“1em”等于“10px”来改变默认值“1em=16px”,这样一来,我们设置字体大小相当于“14px”时,只需要将其值设置为“1.4em”。

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

为什么“li”的“1.4em”是不是“14px”将是一个问号呢?在使用“em”作单位时,一定需要知道其父元素的设置,因为“em”就是一个相对值,而且是一个相对于父元素的值,其真正的