js实现跨设备自适应屏幕

来源：互联网发布：《不持有的生活》知乎编辑：程序博客网时间：2024/05/02 02:14
自适应pc，pad，mobile

<link rel="stylesheet" href="" id="styleCss"/><script type="text/javascript">        window.onload = function() {//获取屏幕宽度函数            function client() {                if(window.innerWidth != null)  // ie9 +  最新浏览器                {                    return {                        width: window.innerWidth,                        height: window.innerHeight                    }                }                else if(document.compatMode === "CSS1Compat")  // 标准浏览器                {                    return {                        width: document.documentElement.clientWidth,                        height: document.documentElement.clientHeight                    }                }                return {   // 怪异浏览器                    width: document.body.clientWidth,                    height: document.body.clientHeight                }            }            var styleCss = document.getElementById("styleCss");            //当浏览器窗口被改变大小时会触发 onresize 事件。            window.onresize = reSize;            function reSize() {                //得到屏幕的宽度                var clientWidth = client().width;                //判断屏幕宽度，加载不用的样式                if(clientWidth > 980)                {                    styleCss.href = "css/style.css";                }                else if(clientWidth > 640)                {                    styleCss.href = "css/pad.css";                }                else                {                    styleCss.href = "css/mobile.css";                }            }        }    </script>
0 0