<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< title > 长度单位 em rem</ title >
</ head >
< body >
<!---->
< div style= " font-size : 12 px " >
我是第一层
< div style= " font-size : 2 em " > 我是第二层
< div style= " font-size : 2 em " > 我是第三层
< div style= " font-size : 2 em " > 我是第四层
</ div >
</ div >
</ div >
</ div >
< div style= " font-size : 12 px " >
我是第一层
< div style= " font-size : 2 em " > 我是第二层
< div style= " font-size : 2 rem " > 我是第三层
< div style= " font-size : 2 rem " > 我是第四层
</ div >
</ div >
</ div >
</ div >
< div style= " font-size : 12 px " >
我是第一层
< div style= " font-size : 2 em " > 我是第二层
< div style= " font-size : 2 em " > 我是第三层
< div style= " font-size : 2 em " > 我是第四层
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
<!--CSS3 引入了一些新的尺寸单位,重点推荐的 rem (根 em ),和 em 和百分比不同的是它不是与父元素挂钩,而是和文档的根元素( html )挂钩。
em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
我们在之前的 web 设计中大量使用了 px 进行布局,因为早期固定布局使用 px 较为方便,逐渐养成了这种习惯。
而使用 em 单位其实更加灵活,,尤其是在修改样式时,只需要修改一下挂钩元素的哪个大小即可,无须修改每一个元素。
默认挂钩元素为父元素。
网页默认字号大小为 16px
em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 ( 引自 CSS2.0 手册 )
任意浏览器的默认字体高都是 16px 。所有未经调整的浏览器都符合 : 1em=16px 。那么 12px=0.75em,10px=0.625em 。
为了简化 font-size 的换算,需要在 css 中的 body 选择器中声明 Font-size=62.5% ,这就使 em 值变为 16px*62.5%=10px,
这样 12px=1.2em, 10px=1em, 也就是说只需要将你的原来的 px 数值除以 10 ,然后换上 em 作为单位就行了。
EM 特点
1. em 的值并不是固定的;
2. em 会继承父级元素的字体大小。
px :为像素单位。它是显示屏上显示的每一个小点,为显示的最小单位。它是一个绝对尺寸单位;
em :它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为 16px ,则 2em == 32px ;
% : 百分比,它是一个更纯粹的相对长度单位。它描述的是相对于父元素的百分比值。如 50% ,则为父元素的一半。
这里需要注意的是: em 是相对于应用于当前当前元素的字体尺寸;而百分比则是相对于父元素的尺寸。 -->