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;
}

图片说明

5. 总结1

在做项目的时候用什么单位长度取决于你的需求,我一般是这样的:

(1)像素(px):用于元素的边框或定位。

(2)em/rem:用于做响应式页面,不过我更倾向于 rem,因为 em 不同元素的参照物不一样(都是该元素父元素),所以在计算的时候不方便,相比之下 rem 就只有一个参照物(html元素),这样计算起来更清晰。

6. 总结2

(1)rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。

(2)em 单位基于使用他们的元素的字体大小。

(3)rem 单位基于 html 元素的字体大小。

(4)em 单位可能受任何继承的父元素字体大小影响

(5)rem 单位可以从浏览器字体设置中继承字体大小。

(6)使用 em 单位应根据组件的字体大小而不是根元素的字体大小。

(7)在不需要使用 em 单位,并且需要根据浏览器的字体大小设置缩放的情况下使用 rem。

(8)使用 rem 单位,除非你确定你需要 em 单位,包括对字体大小。

(9)媒体查询中使用 rem 单位

(10)不要在多列布局中使用 em 或 rem -改用 %。

(11)不要使用 em 或 rem,如果缩放会不可避免地导致要打破布局元素。

对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可 。

对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。