client系列属性与响应式布局原理

1.client系列

@clientWidth和clientHeight：

偏移offsetWidth: width  +  padding  +  border
卷曲scrollWidth: width  +  padding  不包含 border   内部内容的大小
可视clientWidth: width  +  padding  不包含 border

@clientTop和clientLeft

clientTop和clientLeft没什么用

他们就是borderTop和borderLeft（如果有滚动条会包含滚动条的宽度，但谁见过滚动条在顶部或者左侧的？！）

(1)兼容性问题

兼容性写法：

    var clientWidth = window.innerWidth|| 
                    document.documentElement.clientWidth||
                    document.body.clientWidth|| 0;

封装函数：

function client() {
    return {
        width: window.innerWidth || 
                document.documentElement.clientWidth ||
                document.body.clientWidth || 0,
        height: window.innerHeight || 
                document.documentElement.clientHeight || 
                document.body.clientHeight || 0
    };
}

2.响应式布局：

源码：

window.onresize = function () {
    responsive();
};
responsive();

function responsive() {
    console.log("非常消耗性能的代码");
    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";
    }
}

添加内容：

//使浏览器往下滚动到1000px的位置，可以使用此属性做整屏滑动
 window.scrollTo（0, 1000);