页面自适应

1.利用JS的window.innerWidth

注意：往页面元素添加style属性时记得属性的大小写区分

  window.addEventListener("load", function () {
            var container = document.querySelector(".container");
            var clientW = 0;
            resize();//初始化调用

            //监听窗口的大小变化
            window.addEventListener("resize", resize);

            function resize() {
                //获取改变后的宽度
                clientW = window.innerWidth;
                console.log(clientW);

                if (clientW >= 1200) {
                    container.style.width = "1170px";

                } else if (clientW >= 992) {
                    container.style.width = "970px";
                    console.log(222);
                } else if (clientW >= 768) {
                    container.style.width = "750px";
                    console.log(333);
                } else {
                    container.style.width = "100%";
                    console.log(444);
                }
            }
        });

2.利用CSS3中的media属性

注意：and要和其他用空格分开，属性单位不能丢失，各个属性用小括号来分隔开

语法：

@media mediatype and|not|only (media feature) {
CSS-Code;
}

        @media screen and (max-width: 768px) {
            .container {
                width: 100%;
            }
        }

        @media screen and (max-width: 992px) and (min-width: 768px) {
            .container {
                width: 750px;
            }
        }

        @media screen and (max-width: 1200px) and (min-width:992px) {
            .container {
                width: 970px;
            }
        }

        @media screen and (min-width: 1200px) {
            .container {
                width: 1170px;
            }
        }