526互联

css中rem，em

发布时间 2023-05-09 16:04:01作者: 盘思动

名词解释,rem是使用的重点

1.rem的定义理解： 通过设置 根元素<html>的font-size的大小，来控制整个html文档内的字体大小、元素宽高、内外边距等，

2.rem（font size of the root element）是指相对于根元素的字体大小的单位。
　em（font size of the element）是指相对于父元素的字体大小的单位。
　它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

demo

<!DOCTYPE html>
<html lang="en" style="font-size:100px;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .direction{
        width:800px;
        height:300px;
        margin:auto;
        text-align: center;
        border:1px solid #ff0000;
    }
    .direction p:nth-of-type(1){
        font-size:0.2rem;
        color:red;
    }
    .direction p:nth-of-type(2){
        font-size:20px;
        color:green;
    }
</style>
<body>
    <div class="direction">
        <p>你好1</p>
        <p>你好2</p>
    </div>
</body>
</html>