em单位、rem单位与百分比单位

最后更新时间：2019年09月26日

em单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>em单位</title>
    <style type="text/css">
        div{
            font-size: 16px;
        }
        .p01{
            font-size: 1em;
        }
        .p02{
            font-size: 1.5em;
        }
        .p03{
            font-size: 2em;
        }
    </style>
</head>
<body>
    <div>
        <p class="p01">em单位em单位em单位em单位em单位em单位em单位em单位em单位</p>
        <p class="p02">em单位em单位em单位em单位em单位em单位em单位em单位em单位</p>
        <p class="p03">em单位em单位em单位em单位em单位em单位em单位em单位em单位</p>
    </div>
</body>
</html></title>
    <style type="text/css">
        div{
            font-size: 16px;
        }
        .p01{
            font-size: 1em;
        }
        .p02{
            font-size: 1.5em;
        }
        .p03{
            font-size: 2em;
        }
    </style>
</head>
<body>
    <div>
        <p class="p01">em单位em单位em单位em单位em单位em单位em单位em单位em单位</p>
        <p class="p02">em单位em单位em单位em单位em单位em单位em单位em单位em单位</p>
        <p class="p03">em单位em单位em单位em单位em单位em单位em单位em单位em单位</p>
    </div>
</body>
</html>

rem单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rem单位</title>
    <style type="text/css">
        html{
            font-size: 100px;
        }
        div{
            font-size: 16px;
        }
        .p01{
            font-size: 0.16rem;
        }
        .p02{
            font-size: 0.24rem;
        }
        .p03{
            font-size: 0.32rem;
        }
    </style>
</head>
<body>
    <div>
        <p class="p01">rem单位rem单位rem单位rem单位rem单位rem单位rem单位rem单位</p>
        <p class="p02">rem单位rem单位rem单位rem单位rem单位rem单位rem单位rem单位</p>
        <p class="p03">rem单位rem单位rem单位rem单位rem单位rem单位rem单位rem单位</p>
    </div>
</body>
</html>

rem单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百分比单位</title>
    <style type="text/css">
        div{
            font-size: 16px;
        }
        .p01{
            font-size: 100%;
        }
        .p02{
            font-size: 150%;
        }
        .p03{
            font-size: 200%;
        }
    </style>
</head>
<body>
    <div>
        <p class="p01">百分比单位百分比单位百分比单位百分比单位百分比单位</p>
        <p class="p02">百分比单位百分比单位百分比单位百分比单位百分比单位</p>
        <p class="p03">百分比单位百分比单位百分比单位百分比单位百分比单位</p>
    </div>
</body>
</html>

声明：子客|版权所有，违者必究|如未注明，均为原创|网站采用BY-NC-SA协议授权

转载：请注明原文链接 - em单位、rem单位与百分比单位

Carpe Diem and Do what I like