移动端h5、页面适配rem布局 css3方法以及pc h5互跳等...

之前上家公司 rem布局适配，是用的 js来控制，最近在写一个移动端h5 页面，用到了纯css3方法，贼简单还节约性能   这里是拿设计稿 750px 来说的

当然首先需要 设置 viewport 视口

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">复制代码

然后 html 

html{font-size:100px;font-size:calc(100vw / 750 * 100);width:100%;height: 100%;}复制代码

这里介绍两种 js方法 设计稿按 750来说的   rem量多少 除以 100 就行，比如量的 100px,就写 1rem即可

// 之前的 js方法  这里 k值是 设计稿的大小
//屏幕适应 
    (function (win, doc) {
        if (!win.addEventListener) return;
        var html = document.documentElement;
        function setFont() {
            var html = document.documentElement;
            var k = 750;
            html.style.fontSize = html.clientWidth / k * 100 + "px";
        }
        setFont();
        setTimeout(function () {
            setFont();
        }, 300);
        doc.addEventListener('DOMContentLoaded', setFont, false);
        win.addEventListener('resize', setFont, false);
        win.addEventListener('load', setFont, false);
    })(window, document);

// 或者使用这个方法 
<script>
        (function (win,doc){
            if (!win.addEventListener) return;
            var html=document.documentElement;
            function setFont()
            {
                var cliWidth=html.clientWidth;
                html.style.fontSize=100*(cliWidth/750)+'px';
            }
            win.addEventListener('resize',setFont,false);
            setFont();
        })(window,document);
    </script>

复制代码

  在这里在介绍一个手机横屏的 适配方案 横屏是按照 1334px 来算的

<script>
        (function (win,doc){
            if (!win.addEventListener) return;
            var html=document.documentElement;
            function setFont(cb) {
                var w = html.clientWidth,
                    h = html.clientHeight;
                html.style.fontSize= w > h ? w/1334*100+"px" : w/750*100+"px";
                if(cb&&typeof (cb)=="function"){cb()}
            }
            setFont();
            doc.addEventListener('DOMContentLoaded',setFont,false);
            win.addEventListener('resize',setFont,false);
            win.addEventListener('load',setFont,false);
        })(window,document);

    </script>复制代码

pc跳m

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
    window.location.href = "移动端地址"+location.search;
}复制代码

m跳pc

if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
    window.location.href = "PC端地址"+location.search;
}复制代码

移动端开启硬件加速

1. 何为硬件加速

就是将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器。这样就可以使得animation与transition更加顺畅。

2. 如何开启硬件加速

Chrome, FireFox, Safari, IE9+ 以及最新的 Opera都支持硬件加速，只要使用特定的CSS语句就可以开启硬件加速:

/**使用3d效果来开启硬件加速**/
.你的类名 {
   -webkit-transform: translate3d(0,0,0)
   transform: translate3d(0,0,0)
}复制代码

如果并不需要用到transform变换，仅仅是开启硬件加速，可以用下面的语句:

/**原理上还是使用3d效果来开启硬件加速**/
.你的类名{
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
}复制代码

对于safari以及chrome，可能会在使用animation或者transition时出现闪烁的问题，可以使用以下的解决方法:

   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;

/**webkit上也可以用以下语句  **/
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);复制代码

转载于:https://juejin.im/post/5bbb16b9e51d450e7210e1ee