菜单

rem.js(二)

2019年5月4日 - Ajax
!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);
var html = document.getElementsByTagName("html")[0];

        var rootResize = function() {

        var winClient = document.documentElement.clientWidth;

        var fontSize = winClient < 640 ? winClient / 16 : 40;

        if (fontSize < 20) {

            fontSize = 20;

        }

        html.style.fontSize = fontSize + "px";

        }

        rootResize();

        window.onresize = function() {

        rootResize();

        }

平整正是,调用函数,放三个参数,第一个参数,是设计稿的幅度,第三个参数是px与rem的转移比例,平日会写拾0(因为好算);当然了,要把那段js代码最棒封装在2个独自的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);

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图