js window窗口事件（浏览器可视宽高、设备适配尺寸、）

窗口缩放事件：onresize

浏览器页面可视宽高：innerWidth   innerHeight

设备屏幕适配尺寸 ：超大pc >=1200、pc >= 992 、平板 >= 768 、手机端 >= 320

设备分辨率宽高：screen.width    screen.height

 

window.onresize = function () {

    //  浏览器页面可视宽度
    console.log(innerWidth);

    //  浏览器页面可视高度
    console.log(innerHeight);

    //  设备尺寸适配
    if (innerWidth >= 1200) {
        console.log('超大pc');
    }else if (innerWidth >= 992) {
        console.log('pc');
    }else if (innerWidth >= 768) {
        console.log('平板');
    }else if (innerWidth >= 320) {
        console.log('手机端');
    }


}

获取页面滚动距离、获取元素距离页面顶部的高度

获取页面横纵方向上的滚动距离
var x = pageXOffset;
var y = pageYOffset;


获取元素距离页面顶部的高度
console.log(box.offsetTop);