px em rem %作为单位使用

博客地址 ：https://www.cnblogs.com/sandraryan/

px 我们都很熟悉啦，但是固定大小无法适配各种屏幕。

rem是CSS3新增的一个相对单位（root em，根em），还是相对单位，但相对的是HTML根元素。

rem有多方便呢，那就是通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

也就是根元素设置px值，其他子元素都设置rem值，设置了rem的元素大小会根据根元素的大小成比例缩放，如果需要修改整套页面的大小，仅修改根元素px就可以。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p {
            margin:;
        }
        html {
            font-size: 1px;
        }
        .p1 {
            font-size: 5rem;
        }
        .p2 {
            font-size: 10rem;
        }
        .p3 {
            font-size: 15rem;
        }
        .p4 {
            font-size: 20rem;
        }
        .p5 {
            font-size: 25rem;
        }
        .p6 {
            font-size: 30rem;
        }
    </style>
</head>

<body>
    <div>
        <p class="p1">p1</p>
        <p class="p2">p2</p>
        <p class="p3">p3</p>
        <p class="p4">p4</p>
        <p class="p5">p5</p>
        <p class="p6">p6</p>
    </div>
</body>

</html>

现在忽然改需求，说这字太小了，改。

然后，我萌就动手了

 html {
            font-size: 2px;
        }

为了看出来效果，就没修改截图的比例~~~~~

em是相对长度单位。

em会继承父级元素的字体大小。如果没有设置，则是相对于浏览器的默认字体尺寸。

浏览器默认字体16px，1em=16px。

为了方便计算，一般在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

<p class="p4">父级10px，自己2em的p</p>

 div {
        font-size: 16px;
    }
    .p4 {
        font-size: 2em;
    }

尝试把父级字体设置为62.5%

 <div class="div">
        <p>父级62.5%，p为16em</p>
        <p>16px</p>
    </div>

 .div {
        font-size: 62.5%;
    }
    .div p:first-child {
        font-size: 1.6em;
    }
    .div p:last-child {
        font-size: 16px;
    }

两个都是实际16px大小。

三个一起举（三）个例子 分别使用三个单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    html {
        font-size: 1px;
    }
    .p1 {
        font-size: 16rem;
    }
    .p2 {
        font-size: 16px;
    }
    .p3 {
        font-size: 16em;
    }

    </style>
</head>
<body>
    <div>
        <p class="p1">设置为16rem的p</p>
        <p class="p2">设置为16px的p</p>
        <p class="p3">设置为16em的p 父级没fontsize，相对于浏览器默认的16px</p>
    </div>
</body>
</html>

显示成这样子