HTML Rem自适应方案

1. 设置标签头

2.  设置body html  全屏

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 自适应模板