本文已参与「新人创作礼」活动，一起开启掘金创作之路

本文主要记录了rem屏幕适配，rem屏幕适配分为两篇，这一篇为简单版的rem屏幕适配，介绍了简单版的rem屏幕适配，及其原理以及存在的问题，下一篇介绍优化版的rem屏幕适配，它很好的解决了1像素边框问题。

rem屏幕适配

通过使用rem单位使网页，在不同屏幕尺寸下正常显示的一种移动端开发方案;

rem是CSS3新增的一个相对长度单位，相对于根元素（html）的font-size进行计算;

简单屏幕适配方案

原理

设置<meta>标签、获取视口宽度，动态设置根元素(HTML)的fontsize。

代码实现

<!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, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
	<style>
        html{
            font-size: 100px;
        }
        body{
            margin: 0;
            padding: 0;
        }
        div{
            height: 1rem;
            background-color: red;
            border-bottom: 1px solid #000;
        }
    </style>
    <script>
        setRemUnit();
        addEventListener('resize', setRemUnit);
        function setRemUnit(){
            // 获取视口宽度
            let viewWidth = document.documentElement.getBoundingClientRect().width
            || window.innerWidth;
            // 基于设计稿 375 宽进行设置，可根据自己需要修改
            let rabtio = viewWidth / 375;
            // 设置fontSize，html的fontsize为100； 1rem = 100px
            let fontSize = rabtio * 100;
            // 修改HTML的fontsize
            document.documentElement.style.fontSize = fontSize + 'px';
        }
    </script>
</head>
<body>
    <div></div>
</body>
</html>