两种方式模拟bootstrap栅格系统container类

两种方式模拟bootstrap栅格系统container类

1、bootstrap栅格系统container类基本功能介绍

container类会根据屏幕可视区域宽度，将容器宽度设置为固定大小

屏幕宽度	超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 大桌面显示器 (≥1200px)
.container 最大宽度	None （自动）	750px	970px	1170px

2、js模拟实现

实现思路：通过js窗口resize事件监听窗口的大小变化，从而改变容器宽度。

<style>
    .container{
　　　　height: 40px;
       margin: 0 auto;
       background-color: rebeccapurple;
   }
</style>
<div class="container"></div>
<script>
    window.addEventListener("load", function () {
        // 1. 获取容器
        let container = document.querySelector(".container");
        let clientW = 0;
        resize();
        // 2. 监听窗口的大小变化
        window.addEventListener("resize", resize);
        function resize() {
            // 2.1 获取改变后的宽度
            clientW = window.innerWidth;
            // 2.2 判断
            if(clientW >= 1200){ // 超大屏幕
                container.style.width = "1170px";
            }else if(clientW >= 992){ // 大屏幕
                container.style.width = "970px";
            }else if(clientW >= 768){ // 小屏幕
                container.style.width = "750px";
            }else { // 超小屏幕
                container.style.width = "100%";
            }
        }
    });
</script>

3、css媒体查询模拟实现

<style>
        .container{
            height: 40px;
            margin: 0 auto;
            background-color: rebeccapurple;
        }

        /*媒体查询*/
        @media screen  and (max- 768px){
            .container{
                width: 100%;
            }
        }
　　　　　
        @media screen  and (min- 768px) and (max- 992px){
            .container{
                width: 750px;
            }
        }
        @media screen  and (min- 992px) and (max- 1200px){
            .container{
                width: 970px;
            }
        }
        @media screen  and (min- 1200px){
            .container{
                width: 1170px;
            }
        }
</style>
<div class="container"></div>