CSS中px,em,rem单位的区别

CSS中px,em,rem单位的区别

它们都是用于设置字体的大小以及盒子的宽高，但是px不会因为浏览器尺寸的改变而改变，而em和rem会因为浏览器尺寸的变化而变化

px

px像素（Pixel），它是显示屏上显示的每一个小点，为显示的最小单位。它是一个绝对尺寸单位，是不能变动的；在指定字体大小和元素的宽高的时候使用。像素是相对于显示器屏幕分辨率而言的。

PX特点：

1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

em

em是相对长度单位,相对于应用当前文本的字体尺寸。如果当前文本的字体尺寸未被定义，则相对于浏览器的默认字体尺寸

在浏览器中默认字体尺寸为16px，换句话说1em=16px,一般我们在写自适应布局时经常会用到em为单位。通过在CSS中的body选择器中设置font-size值来简化代码，使得页面中所有的em都相对于body值。

首先任意浏览器在默认状态下的字体大小都是16px,都符合1em = 16px;
为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px62.5%=10px, 这样 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位*就行了。

em特点：

1. em的值并不是固定的；
2. em会继承父级元素 的字体大小。

rem

rem是CSS3中新增的一个相对单位，它与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

rem是相对于< html >根元素的字体尺寸，这一点和em不同。当em出现多重继承的时候，字体的大小控制就会变得很麻烦，rem的出现就是为了克服这一缺点。

如果要对网页根元素字体大小进行修改，需要在< html >标签中加上**style=“font-size:value”**属性

rem特点

1. rem的大小是根据 html根目录下的字体大小 进行计算的。
2. 当我们改变根目录下的字体大小的时候，下面字体都改变。
3. rem不仅可以设置字体的大小，也可以设置元素宽、高等属性。