rem js相关

Posted 2020-11-30 kbeer

!function(n){
    var  e=n.document,
         t=e.documentElement,
         i=720,
         d=i/100,
         o="orientationchange"in n?"orientationchange":"resize",
         a=function(){
             var n=t.clientWidth||320;n>720&&(n=720);
             t.style.fontSize=n/d+"px"
         };
         e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

规则就是，调用函数，放两个参数，第一个参数，是设计稿的宽度，第二个参数是px与rem的转换比例，通常会写100（因为好算）；当然了，要把这段js代码最好封装在一个单独的js文件里，并且放在所有的css文件引入之前加载。

其中 var n=t.clientWidth||320;n>720&&(n=720);

的意思是:如果clientWidth的值获取不到,n就等于320,如果n>720成立就会执行n=720的操作

M && N中，若M为假，则N不被执行；

M｜｜N中，若M为真，则N不被执行。

上面这段js手机上在有表单的时候,在输入法弹出的时候会失灵

代码一：

(function(win) {
                            if(!win.addEventListener) return;
                            var html = document.documentElement;
            
                            function setFont() {
                                function setRem() {
                                    var cliWidth = html.clientWidth;
                                    var w = document.documentElement.clientWidth,
                                        h = document.documentElement.clientHeight;
                                    var val = 640;
                                    
                                    if(w >=640){
                                        cliWidth = 640;
                                    }
            //                        if(w > h) {
            //                            //横屏
            //                            val = 1334;
            //                        }
                                    html.style.fontSize = 100 * (cliWidth / val) + ‘px‘;
                                }
                                setRem();
                                setTimeout(function() {
                                    setRem();
                                }, 300);
            
                            }
                            win.addEventListener(‘resize‘, setFont, false);
                            setFont();
                        })(window);

代码二   ：

//屏幕适应

        (function (win, doc) {

            if (!win.addEventListener) return;

            var html = document.documentElement;

            function setFont() {

                var html = document.documentElement;

                var cliWidth = html.clientWidth;

                var k = 640;

                if (cliWidth >= 640){

                  cliWidth = 640;

                }

               

                html.style.fontSize = cliWidth / 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);