通过onresize事件实现的背景图片随视口居中,背景高度不变 宽度小于指定宽度出现横向滚动条

JS部分

//1。获得视口的宽度
    var viewPortwidth = document.documentElement.clientWidth;
    //2。设计图的宽度
    var designWidth =1920;
    //3。计算左侧移动距离
    var offseLeft = (designWidth-viewPortwidth)/2;
    //4。获取需要响应的Dom元素
 var banner=document.querySelector(".dom");

//封装函数 
     function moveTo(dom,designWidth,minWidth,viewPortwidth){
     if(viewPortwidth<minWidth){
            return; 
        }
        //设置左侧移动距离
        var offseLeft = (designWidth-viewPortwidth)/2;
        dom.style.backgroundPositionX=-offseLeft+"px";

    }
        //给onresize事件绑定函数实现响应式

    window.onresize =function(){
        var viewPortwidth = document.documentElement.clientWidth;
        moveTo(dom,designWidth,1000,viewPortwidth);
    }

html部分

<div class="headerWrap">
    <div class="dom">
           </div>

</div>

需要注意的是可能会有朋友出现缩小后出现横向导航条之后向右拉出现空白，解决问题把容器盒子
headerWrap最小宽度(min-width)设置为与最小响应宽度（minWidth）一样的值即可解决，这一点害我费了点时间