rem布局-Web响应式布局入门到实战

当前位置:　首页>> 技术小册>> Web响应式布局入门到实战

**rem**
概念：指相对于根元素(html)的字体大小的单位

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            font-size:10px;
        }
        div{
            font-size:3rem; /* 3rem = html的font-size * 3 = 30px */
        }
    </style>
</head>
<body>
    <div>123</div>
</body>
</html>
```

**rem响应式的原理：**
根据屏幕不同的尺寸，调整根元素的font-size，实现响应式的效果。

**rem与em的区别**
rem是相对于根字体的size来设置的,而em是相对于父级元素字体的size来设置的。
因为父组字体还有一些继承关系等，因此,em的计算相对复杂，不推荐

**rem响应式实现方式：**
使用媒体查询+ rem ,或者使用js+rem,在不同宽度的视口下自动调整元素大小

rem示例：

/**
         * 动态设置根字体大小
        */
        var c=()=>{
            let w=document.documentElement.clientWidth; /* 获取设备的宽度 */
            //设置一个默认值，以320的宽度(iphone)来计算20号字体
            let defaultWidth = 20*(w/320)
            //设置字号
            let n= defaultWidth > 40 ? 40 + 'px' : defaultWidth + 'px';
            //设置根字体大小
            document.documentElement.style.fontSize = n;
        }
        
        window.addEventListener("load",c);
        window.addEventListener("resize",c);
            
    </script>
    <style>
        div{
            font-size:1rem;
        }
    </style>
</head>
<body>
    <div>123</div>
</body>
</html>
```

可以通过F12，改变页面尺寸，来查看根字体随尽寸大小而变化：

![](/uploads/images/20230421/0a18fd6b9ce455c9d2c11df07860eb9e.png)

该分类下的相关小册推荐：

vue高级应用开发与构建

uniapp快速入门与实战

WebGL开发指南

web前端面试完全指南