1.client系列
@clientWidth和clientHeight：
偏移offsetWidth: width + padding + border
卷曲scrollWidth: width + padding 不包含 border 內(nèi)部內(nèi)容的大小
可視clientWidth: width + padding 不包含 border
@clientTop和clientLeft
clientTop和clientLeft沒什么用
他們就是borderTop和borderLeft（如果有滾動條會包含滾動條的寬度篮灼，但誰見過滾動條在頂部或者左側(cè)的？！）
(1)兼容性問題
兼容性寫法：
var clientWidth = window.innerWidth||
document.documentElement.clientWidth||
document.body.clientWidth|| 0;
封裝函數(shù)：
function client() {
return {
width: window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth || 0,
height: window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight || 0
};
}
2.響應(yīng)式布局：
源碼：
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";
}
}
添加內(nèi)容：
//使瀏覽器往下滾動到1000px的位置哼蛆，可以使用此屬性做整屏滑動
window.scrollTo（0, 1000);