js基础03特效简单响应式页面布局client()函数封装

网页可视区的宽高的获取：
client系列：
clientWidth用于响应式布局：
窗体大小发生改变的事件 onresize
封装能够获取网页可视区的宽度和高度

<script>
        //窗体大小发生改变的事件 onresize
        window.onresize=function () {
            console.log(client().width);
        }
        //封装能够获取网页可视区的宽度和高度
        function client(){
            var clientWidth=window.innerWidth || document.documentElement.clientWidth||document.body.clientWidth||0;
            var clientHeight=window.innerHeight || document.documentElement.clientHeight||document.body.clientHeight||0;
            var o={};//点出来的东西式一个对象
            o.width=clientWidth;
            o.height=clientHeight;
            return o;
        }
        //封装函数简化：
        function client(){
            return {
                width:window.innerWidth || document.documentElement.clientWidth||document.body.clientWidth||0,
                height:window.innerHeight || document.documentElement.clientHeight||document.body.clientHeight||0
            };//点出来的东西是一个对象
        }
    </script>

体会响应式布局原理（其中一种实现响应式布局的方式）：
案例：当页面宽度 大于960像素时 页面为红色并显示computer；
当页面宽度 大于640 小于960 页面为绿色并显示 tablet
剩余情况为黄色并显示mobile。

<script>
        window.onresize=function () {//页面改变时执行
            responsive();
        };
        responsive();//页面一加载就开始执行

        function responsive() {
            if (client().width>960) {
                document.body.style.backgroundColor="red";
                document.body.innerHTML="computer";
            }else if (client().width>640) {
                document.body.style.backgroundColor="green";
                document.body.innerHTML="tablet";
            }else{
                document.body.style.backgroundColor="yellow";
                document.body.innerHTML="mobile";
            }
        }
        function client(){
            return {
                width:window.innerWidth || document.documentElement.clientWidth||document.body.clientWidth||0,
                height:window.innerHeight || document.documentElement.clientHeight||document.body.clientHeight||0
            };
    </script>