px,em,rem之间有什么区别?
大家都知道px不会随着一些选项而发生改变的(除非改变px的大小),而rem跟em是会根据某些选项而发生相应的变化。
px
px像素,是绝对长度单位的一种,它的大小是根据用户屏幕显示器的分辨率决定的(因此不同的设备显示相同的像素值也可能会有不同的结果)。
em
em是相对长度单位,相对于应用当前文本的字体尺寸。如果当前文本的字体尺寸未被定义,则相对于浏览器的默认字体尺寸。简而言之,em是根据父级元素的字体尺寸而发生改变的,如父级没有设置则根据浏览器的默认字体尺寸来换算得到。所有未经调整的浏览器都符合:1em= 16px。有时为简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,此时1em=16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说换算时只需将原有px数值除以10,然后换上em作为单位即可。
特点:
1:em 的值并不是固定的。
2:em会继承父级字体尺寸。
rem
rem是CSS3新增的一个相对单位(root em,根em)。除了和em的相对对象不同,em的其它特点都适用于rem。比如:em和rem都是改变字体大小的相对长度单位,1rem = 16px (默认为浏览器大小16px),它们之间的换算公式是1em = 根元素的font-size(比如根元素的font-size是100px,则1rem=100px)。