HTML Rem自适应方案

1. 设置标签头

    <meta  charset="utf-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

2.  设置body html  全屏

  <style>
        html, body {
            margin: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
    </style>

3. 避免使用px单位 尽量使用rem/百分比单位并在屏幕发生改变和初始化页面的时候调用以下函数

    function resizeRem() {
        if (window.innerWidth < window.innerHeight)
        {
            var html = document.querySelector('html');
            var rem = html.offsetHeight / 10.80;
            html.style.fontSize = rem + "px";
        }
        else {
            var html = document.querySelector('html');
            var rem = html.offsetWidth / 19.20;
            html.style.fontSize = rem + "px";
        }
    }

4. 使用@media标签做一套横屏和竖屏的适配

@media all and (orientation : portrait) 竖屏
@media all and (orientation : landscape)横屏

按照以上操作可以适配多种情况。

模板工程: GitHub - ChenBin12138/autoHtmlTemplate: HTML 自适应模板