移动端适配

1.rem 适配

获取根元素html标签

用html.getBoundingClientRect().width获取他的视口大小

设置根元素的字体大小为视口大小/16

这样在任何一个设备上1rem的大小都是等比的

(function(){

            var html = document.querySelector("html");

            var width = html.getBoundingClientRect().width;

            html.style.fontSize=width/16+"px";

})();

2.viewport适配

//获取图片的宽度

var tragetW =640;

//获取整个视口的宽度

var width = document.documentElement.clientWidth;

//定义一个比例视口的宽度除以设计图的宽度

var scale = width/tragetW;

//动态创建meta标签，使默认的缩放比例为这个比例

var metaNode = document.querySelector("meta[name='viewport']");

metaNode.setAttribute("content","width=device-width,initial-scale="+scale);

3.一物理像素适配

   (function(w){

                //拿到对应设备的像素比如果不存在则指定为1

                var dpr = window.devicePixelRatio||1;

                var scale = 1/dpr;

                var rem = document.documentElement.clientWidth*dpr/16;

                //实现了页面所有元素的缩放

                var metaNode = document.querySelector("meta[name='viewport']");

                metaNode.setAttribute("content","width=device-width,initial-scale="+scale );

                //将布局元素放大回来

        //        var html = document.querySelector("html");

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

                var styleNode = document.createElement("style");

                styleNode.innerHTML="html{font-size:"+rem+"px!important}";

                document.head.appendChild(styleNode);

                w.dpr=dpr;

                w.scale=scale;

                w.rem=rem;

})(window)

移动端适配

推荐阅读更多精彩内容