h5适配解决方案一、移动端适配方案弹性盒模型布局。流式布局（百分比布局）。 rem布局。 vw/vh。响应式布局（

一、移动端适配方案

弹性盒模型布局。
流式布局（百分比布局）。
rem布局。
vw/vh。
响应式布局（媒体查询）。

二、常用适配方案

1.rem & vw。 2.rem & 媒体查询。

三、接下来我们主要说一下rem em px 设计图相关原理

rem 意思根元素的font-size值 html{font-size:12px} 那么1rem = 12px
em 相对于父级 .content{font-size:12px} 子元素 1em = 12px
px 绝对单位
设计图宽度 ui设计的宽度

四、如何适配rem

公式：htmlFontSize = windowWidth / uiWidth * 100

css使用：对应除以100

<!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 mixnum-scale=1.0 minnum-scale=1.0">
    <title></title>
    <style>
        .h5content{
            width: 4rem;
            height: 4rem;
            background: #ff0000;
        }
        .h5content p{
            font-size: 0.24rem;
        }
    </style>
</head>

<body>
    <div class="h5content">
        <p>这个是响应式rem内容</p>
    </div>
    <script type="text/javascript">
        function setRem(uiWidth = 750, initVal = 100) {
            const viewProtWidth = document.documentElement.clientWidth
            document.documentElement.style.fontSize = viewProtWidth / uiWidth * 100 + 'px'
        }
        setRem()
        window.addEventListener('resize', () => {
            setRem()
        })
    </script>
</body>
</html>