px和em和rem的区别

一。px特点：

1. IE无法调整那些使用px作为单位的字体大小；

2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

 

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

二。em的特点

1. em的值并不是固定的；

2. em会继承父级元素的字体大小。

常见写法：

body {

    font-size: 62.5%;

    /*10 ÷ 16 × 100% = 62.5%*/

}

h1 {

    font-size: 2.4em;

    /*2.4em × 10 = 24px */

}

p {

    font-size: 1.4em;

    /*1.4em × 10 = 14px */

}

li {

    font-size: 1.4em;

    /*1.4 × ? = 14px ? */

}

三。rem的特点

rem是指相对于html根元素的字体大小。除了IE8及更早版本外，所有浏览器均已支持rem。

常见如下：

html {

    font-size: 62.5%;

    /*10 ÷ 16 × 100% = 62.5%*/

}

body {

    font-size: 1.4rem;

    /*1.4 × 10px = 14px */

}

h1 {

    font-size: 2.4rem;

    /*2.4 × 10px = 24px*/

}

自动换算的网址http://pxtoem.com/

转载于:https://www.cnblogs.com/luoguixin/p/6142605.html