rem js相关

2018-08-10 11:21:22来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

!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);

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:如何实现进度条效果呢 ?

下一篇:小程序渲染html的两种方法