px、em和rem

参考：https://www.cnblogs.com/webdragon/p/11185979.html

https://www.runoob.com/w3cnote/px-em-rem-different.html

1. 三者的区别

（1）px 是固定的像素，一旦设置了就无法因为适应页面大小而改变。

（2）em 和 rem 相对于 px 更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

（3）em 是相对于其父元素来设置字体大小的，一般都是以的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而 rem 是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。

总之：对于 em 和 rem 的区别一句话概括：

em 相对于父元素，rem 相对于根元素。

2. px

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

PX特点

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

3. em

（1）子元素字体大小的 em 是相对于父元素字体大小

（2）元素的 width/height/padding/margin 用 em 的话是相对于该元素的 font-size

HTML：

<div>
    父元素div
    <p>
        子元素p
        <span>孙元素span</span>
    </p>
</div>

CSS

div {
    font-size: 40px;
    width: 7.5em; /* 300px */
    height: 7.5em;
    border: solid 2px black;
}
p {
    font-size: 0.5em; /* 20px */
    width: 7.5em; /* 150px */
    height: 7.5em;
    border: solid 2px blue ;
    color: blue;
}
span {
    font-size: 0.5em;
    width: 7em;
    height: 6em;
    border: solid 1px red;
    display: block;
    color: red;
}

图片说明

注：任意浏览器的默认字体高都是 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作为单位就行了。

所以我们在写CSS的时候，需要注意两点：

body选择器中声明Font-size=62.5%；
将你的原来的px数值除以10，然后换上em作为单位；
重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

4. rem

rem 是全部的长度都相对于根元素，根元素是谁？元素。通常做法是给 html 元素设置一个字体大小，然后其他元素的长度单位就为 rem。

HTML：

<div>
    父元素div
    <p>
        子元素p
        <span>孙元素span</span>
    </p>
</div>

CSS：

html {
    font-size: 10px;
}
div {
    font-size: 4rem; /* 40px */
    width: 20rem;  /* 200px */
    height: 20rem;
    border: solid 2px black;
}
p {
    font-size: 2rem; /* 20px */
    width: 10rem;
    height: 10rem;
    border: solid 1px blue;
    color:blue ;
}
span {
    font-size: 1.5rem;
    width: 7rem;
    height: 6rem;
    border: solid 2px red;
    display: block;
    color: red;
}

图片说明