zoukankan      html  css  js  c++  java
  • 两种方式模拟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>
  • 相关阅读:
    C语言清空输入缓冲区的N种方法对比(转)
    UNIX网络编程——socket的keep-alive(转)
    UNIX网络编程——套接字选项(心跳检测、绑定地址复用)(转)
    UNIX网络编程——客户/服务器心搏函数 (转)
    TCP心跳 | TCP keepAlive(转)
    linux下使用adb查看android手机的logcat
    linux 常用查看设备命令(转)
    Spring AOP 详解
    HDU 2222 AC自动机 裸题
    大声说出我爱你—英语发音学习总结
  • 原文地址:https://www.cnblogs.com/chuanzi/p/9568151.html
Copyright © 2011-2022 走看看