在CSS中px、em、rem都是计量单位都能表示尺寸,来标识字体的大小,但是他们之间是有所不同的,各有各的优缺点,下面就大略的说一下。

css px

1、px:像素,相对于显示器屏幕分辨率而言的。

2、其作为单位是固定不变的,不能适应浏览器缩放时产生的变化,因此一般不用于响应式网站。

css em

1、em:其值是不固定,只会继承父元素的字体大小。

2、如果其父亲的字体改变,其也会相应的进行改应

css rem

1、rem:是css3中新增的相对单位。

2、其继承html根元素的字体大小。

3、可以通过修改根元素字体大小就来调整其大小

4、浏览器的字体在其未定义之前默认为 16 px

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .em{
                width: 10em;/* 10em = 8 * 10 */
                height: 10em;
                background-color: red;
            }
            .rem{
                width: 10rem;/* 10rem = 16 * 10 */
                height: 10rem;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box" style="font-size: 8px;">
            <div class="em">em</div>
            <div class="rem">rem</div>
        </div>
    </body>
</html>

运行结果:

css中px、em、rem三者的概念与区别

说明:

(1)、div em 的大小为 80*80,其是根据 class 为 box 定义的字体大小来计算的。 8*10=80

(2)、class 为 rem 的 div 为 160*160,其是根据HTML的字体大小来计算的(html字体大小为16)