响应式布局的原理
xsmall <576px
small >=576px
medium >=768px
large >=992px
xlarge >=1200px

接下来是效果图

中屏及以上效果

移动端效果

方案一：使用栅格系统开发响应式页面

index.html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>响应式布局</title>

    <link rel="stylesheet" href="css/base.css">

    <link rel="stylesheet" href="css/grid.css">

    <link rel="stylesheet" href="css/index.css">

</head>

<body>

    <header class="header-container">

        <div class="container">

            <div class="row">

                <div class="header-logo-container col-8 col-md-3">

                    <a href="./index.html" class="header-logo">

                        <img src="img/logo.svg" alt="logo">

                    </a>

                </div>

                <!-- 下拉图标（三条杠），中屏隐藏 -->

                <div class="header-btn-container col-4 d-md-none">

                    <button type="button" class="btn-toggle" id="btn-toggle">

                        <span class="btn-toggle-bar"></span>

                        <span class="btn-toggle-bar"></span>

                        <span class="btn-toggle-bar"></span>

                    </button>

                </div>

                <!-- 中屏导航 -->

                <nav class="header-nav-container col-md-9 d-none d-md-block">

                    <ul class="header-nav">

                        <li class="header-nav-item">

                            <a href="###" class="header-nav-link">手机&amp;平板</a>

                        </li>

                        <li class="header-nav-item">

                            <a href="###" class="header-nav-link">电视&amp;影音</a>

                        </li>

                        <li class="header-nav-item">

                            <a href="###" class="header-nav-link">生活家电</a>

                        </li>

                        <li class="header-nav-item">

                            <a href="###" class="header-nav-link">电脑/办公/存储</a>

                        </li>

                        <li class="header-nav-item">

                            <a href="###" class="header-nav-link">网上商城</a>

                        </li>

                    </ul>

                </nav>

            </div>

        </div>

    </header>

    <!-- 移动端导航 -->

    <nav class="nav-container d-md-none" id="nav">

        <ul class="container">

            <li><a href="###" class="nav-link">手机&amp;平板</a></li>

            <li><a href="###" class="nav-link">电视&amp;影音</a></li>

            <li><a href="###" class="nav-link">生活家电</a></li>

            <li><a href="###" class="nav-link">电脑/办公/存储</a></li>

            <li><a href="###" class="nav-link">网上商城</a></li>

        </ul>

    </nav>

    <div class="slider-container">

        <div class="container">

            <div class="row">

                <!-- 中屏位置往右7个网格 -->

                <div class="slider-text-container col-md-5 col-md-push-7">

                    <h3 class="slider-title">Galaxy S9｜S9+</h3>

                    <h4 class="slider-subtitle">冰蓝 焕新上市</h4>

                    <div class="slider-btns">

                        <a href="###" class="btn-rounded">了解更多</a>

                        <a href="###" class="btn-rounded">立即购买</a>

                    </div>

                </div>

                <div class="col-md-7 col-md-pull-5">

                    <img src="img/1.png" alt="cellphone">

                </div>

            </div>

        </div>

    </div>

    <!-- 中屏一行显示3张图 -->

    <div class="product-container">

        <div class="container">

            <div class="row">

                <div class="col-md-4">

                    <a href="###" class="product-item">

                        <img src="img/2-1.jpg" alt="cellphone" class="product-img">

                    </a>

                </div>

                <div class="col-md-4">

                    <a href="###" class="product-item">

                        <img src="img/2-2.jpg" alt="cellphone" class="product-img">

                    </a>

                </div>

                <div class="col-md-4">

                    <a href="###" class="product-item">

                        <img src="img/2-3.jpg" alt="cellphone" class="product-img">

                    </a>

                </div>

            </div>

        </div>

    </div>

    <!-- 移动端回到顶部 -->

    <div class="backtop-container d-md-none">

        <a href="#" class="btn-backtop">回到顶部</a>

    </div>

    <div class="helper-container">

        <div class="container">

            <div class="helper-info-container">

                <p>* Galaxy A9s具备后置四摄功能，Galaxy A6s为后置双摄产品。</p>

                <p>* Galaxy S9 | S9+广告中手机背面图是Galaxy S9+，Galaxy S9为背面单摄像头产品。</p>

                <p>* 本网站的产品图片以及型号、数据、功能、性能、规格参数等仅供参考，三星有可能对上述内容进行改进，具体信息请参照产品实物、产品说明书。</p>

                <p>* 除非经特殊说明，本网站中所涉及的数据均为三星内部测试结果，涉及的对比均为与三星产品相比较。</p>

            </div>

            <!-- 中屏回到顶部 -->

            <div class="row">

                <div class="helper-backtop-container col-md-2 col-md-offset-10 d-none d-md-block">

                    <a href="#" class="btn-backtop">回到顶部</a>

                </div>

            </div>

            <!-- 底部导航，中屏一行4个，小屏一行2个 -->

            <div class="row">

                <div class="col-6 col-md-3">

                    <h3 class="helper-list-title">网站地图</h3>

                    <ul class="helper-list">

                        <li><a href="###">关于三星</a></li>

                        <li><a href="###">投资者关系</a></li>

                        <li><a href="###">新闻中心</a></li>

                        <li><a href="###">人才招聘</a></li>

                        <li><a href="###">三星开发者网站</a></li>

                    </ul>

                </div>

                <div class="col-6 col-md-3">

                    <h3 class="helper-list-title">三星商店</h3>

                    <ul class="helper-list">

                        <li><a href="###">网上商城</a></li>

                        <li><a href="###">最新活动</a></li>

                        <li><a href="###">授权体验店</a></li>

                        <li><a href="###">全产品专卖店</a></li>

                        <li><a href="###">三星视频空间</a></li>

                    </ul>

                </div>

                <div class="col-6 col-md-3">

                    <h3 class="helper-list-title">服务支持</h3>

                    <ul class="helper-list">

                        <li><a href="###">在线服务</a></li>

                        <li><a href="###">邮件咨询</a></li>

                        <li><a href="###">联系我们</a></li>

                        <li><a href="###">服务中心查询</a></li>

                        <li><a href="###">三星专卖店招募</a></li>

                    </ul>

                </div>

                <div class="col-6 col-md-3">

                    <h3 class="helper-list-title">官方分享</h3>

                    <ul class="helper-list">

                        <li>

                            <a href="###" class="btn-share btn-share-weixin"></a>

                            <a href="###" class="btn-share btn-share-weibo"></a>

                        </li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

    <div class="footer-container">

        <div class="container">

            <div class="row">

                <div class="col-md-10">

                    <ul>

                        <li class="footer-item">

                            <a href="###" class="footer-link">服务条款</a>

                        </li>

                        <li class="footer-item">

                            <a href="###" class="footer-link">重要声明</a>

                        </li>

                        <li class="footer-item">

                            <a href="###" class="footer-link">隐私政策</a>

                        </li>

                    </ul>

                </div>

                <div class="col-md-2">

                    <a href="###" class="footer-link">中国/中文 &gt;</a>

                </div>

            </div>

            <div>

                <p>此网页最好使用IE10浏览器、Chrome浏览器、Safari浏览器或其他新式浏览器进行浏览</p>

                <p>京ICP备xxxxxxxx号 京公网安备1101xxxxxxxx号</p>

            </div>

        </div>

    </div>

    <script>

        var nav = document.getElementById('nav');

        var navExtendedClassName = 'nav-container-extended';

        // 移动端点击下拉按钮，展开顶部导航

        document.getElementById('btn-toggle').onclick = function() {

            // nav.className += ' ' + navExtendedClassName;

            if (nav.classList.contains(navExtendedClassName)) { // 收起

                nav.classList.remove(navExtendedClassName);

            } else { // 展开

                nav.classList.add(navExtendedClassName);

            }

        };

    </script>

</body>

</html>

base.css

* {

    box-sizing: border-box;

    padding:;

    margin:;

}

body {

    font-size: 14px;

}

li {

    list-style: none;

}

a {

    font-size: 14px;

    color: #363636;

    text-decoration: none;

}

a:hover {

    color: #1428a0;

}

img {

    vertical-align: top;

    width: 100%;

    border: none;

}

grid.css

.container {

    width: 100%;

    padding-left: 15px;

    padding-right: 15px;

    margin-left: auto;

    margin-right: auto;

}

/*sm*/

@media (min-width: 576px) {

    .container {

        width: 540px;

    }

}

/*md*/

@media (min-width: 768px) {

    .container {

        width: 720px;

    }

}

/*lg*/

@media (min-width: 992px) {

    .container {

        width: 960px;

    }

}

/*xl*/

@media (min-width: 1200px) {

    .container {

        width: 1140px;

    }

}

.row {

    margin-left: -15px;

    margin-right: -15px;

}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,

.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,

.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {

    position: relative;

    padding-left: 15px;

    padding-right: 15px;

}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {

    float: left;

}

.col-1 {

    width: 8.33333333%;

}

.col-2 {

    width: 16.66666667%;

}

.col-3 {

    width: 25%;

}

.col-4 {

    width: 33.33333333%;

}

.col-5 {

    width: 41.66666667%;

}

.col-6 {

    width: 50%;

}

.col-7 {

    width: 58.33333333%;

}

.col-8 {

    width: 66.66666667%;

}

.col-9 {

    width: 75%;

}

.col-10 {

    width: 83.33333333%;

}

.col-11 {

    width: 91.66666667%;

}

.col-12 {

    width: 100%;

}

.col-offset-12 {

    margin-left: 100%;

}

.col-offset-11 {

    margin-left: 91.66666667%;

}

.col-offset-10 {

    margin-left: 83.33333333%;

}

.col-offset-9 {

    margin-left: 75%;

}

.col-offset-8 {

    margin-left: 66.66666667%;

}

.col-offset-7 {

    margin-left: 58.33333333%;

}

.col-offset-6 {

    margin-left: 50%;

}

.col-offset-5 {

    margin-left: 41.66666667%;

}

.col-offset-4 {

    margin-left: 33.33333333%;

}

.col-offset-3 {

    margin-left: 25%;

}

.col-offset-2 {

    margin-left: 16.66666667%;

}

.col-offset-1 {

    margin-left: 8.33333333%;

}

.col-offset-0 {

    margin-left:;

}

.col-pull-12 {

    right: 100%;

}

.col-pull-11 {

    right: 91.66666667%;

}

.col-pull-10 {

    right: 83.33333333%;

}

.col-pull-9 {

    right: 75%;

}

.col-pull-8 {

    right: 66.66666667%;

}

.col-pull-7 {

    right: 58.33333333%;

}

.col-pull-6 {

    right: 50%;

}

.col-pull-5 {

    right: 41.66666667%;

}

.col-pull-4 {

    right: 33.33333333%;

}

.col-pull-3 {

    right: 25%;

}

.col-pull-2 {

    right: 16.66666667%;

}

.col-pull-1 {

    right: 8.33333333%;

}

.col-pull-0 {

    right: auto;

}

.col-push-12 {

    left: 100%;

}

.col-push-11 {

    left: 91.66666667%;

}

.col-push-10 {

    left: 83.33333333%;

}

.col-push-9 {

    left: 75%;

}

.col-push-8 {

    left: 66.66666667%;

}

.col-push-7 {

    left: 58.33333333%;

}

.col-push-6 {

    left: 50%;

}

.col-push-5 {

    left: 41.66666667%;

}

.col-push-4 {

    left: 33.33333333%;

}

.col-push-3 {

    left: 25%;

}

.col-push-2 {

    left: 16.66666667%;

}

.col-push-1 {

    left: 8.33333333%;

}

.col-push-0 {

    left: auto;

}

/*sm*/

@media (min-width: 576px) {

    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {

        float: left;

    }

    .col-sm-1 {

        width: 8.33333333%;

    }

    .col-sm-2 {

        width: 16.66666667%;

    }

    .col-sm-3 {

        width: 25%;

    }

    .col-sm-4 {

        width: 33.33333333%;

    }

    .col-sm-5 {

        width: 41.66666667%;

    }

    .col-sm-6 {

        width: 50%;

    }

    .col-sm-7 {

        width: 58.33333333%;

    }

    .col-sm-8 {

        width: 66.66666667%;

    }

    .col-sm-9 {

        width: 75%;

    }

    .col-sm-10 {

        width: 83.33333333%;

    }

    .col-sm-11 {

        width: 91.66666667%;

    }

    .col-sm-12 {

        width: 100%;

    }

    .col-sm-offset-12 {

        margin-left: 100%;

    }

    .col-sm-offset-11 {

        margin-left: 91.66666667%;

    }

    .col-sm-offset-10 {

        margin-left: 83.33333333%;

    }

    .col-sm-offset-9 {

        margin-left: 75%;

    }

    .col-sm-offset-8 {

        margin-left: 66.66666667%;

    }

    .col-sm-offset-7 {

        margin-left: 58.33333333%;

    }

    .col-sm-offset-6 {

        margin-left: 50%;

    }

    .col-sm-offset-5 {

        margin-left: 41.66666667%;

    }

    .col-sm-offset-4 {

        margin-left: 33.33333333%;

    }

    .col-sm-offset-3 {

        margin-left: 25%;

    }

    .col-sm-offset-2 {

        margin-left: 16.66666667%;

    }

    .col-sm-offset-1 {

        margin-left: 8.33333333%;

    }

    .col-sm-offset-0 {

        margin-left:;

    }

    .col-sm-pull-12 {

        right: 100%;

    }

    .col-sm-pull-11 {

        right: 91.66666667%;

    }

    .col-sm-pull-10 {

        right: 83.33333333%;

    }

    .col-sm-pull-9 {

        right: 75%;

    }

    .col-sm-pull-8 {

        right: 66.66666667%;

    }

    .col-sm-pull-7 {

        right: 58.33333333%;

    }

    .col-sm-pull-6 {

        right: 50%;

    }

    .col-sm-pull-5 {

        right: 41.66666667%;

    }

    .col-sm-pull-4 {

        right: 33.33333333%;

    }

    .col-sm-pull-3 {

        right: 25%;

    }

    .col-sm-pull-2 {

        right: 16.66666667%;

    }

    .col-sm-pull-1 {

        right: 8.33333333%;

    }

    .col-sm-pull-0 {

        right: auto;

    }

    .col-sm-push-12 {

        left: 100%;

    }

    .col-sm-push-11 {

        left: 91.66666667%;

    }

    .col-sm-push-10 {

        left: 83.33333333%;

    }

    .col-sm-push-9 {

        left: 75%;

    }

    .col-sm-push-8 {

        left: 66.66666667%;

    }

    .col-sm-push-7 {

        left: 58.33333333%;

    }

    .col-sm-push-6 {

        left: 50%;

    }

    .col-sm-push-5 {

        left: 41.66666667%;

    }

    .col-sm-push-4 {

        left: 33.33333333%;

    }

    .col-sm-push-3 {

        left: 25%;

    }

    .col-sm-push-2 {

        left: 16.66666667%;

    }

    .col-sm-push-1 {

        left: 8.33333333%;

    }

    .col-sm-push-0 {

        left: auto;

    }

}

/*md*/

@media (min-width: 768px) {

    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {

        float: left;

    }

    .col-md-1 {

        width: 8.33333333%;

    }

    .col-md-2 {

        width: 16.66666667%;

    }

    .col-md-3 {

        width: 25%;

    }

    .col-md-4 {

        width: 33.33333333%;

    }

    .col-md-5 {

        width: 41.66666667%;

    }

    .col-md-6 {

        width: 50%;

    }

    .col-md-7 {

        width: 58.33333333%;

    }

    .col-md-8 {

        width: 66.66666667%;

    }

    .col-md-9 {

        width: 75%;

    }

    .col-md-10 {

        width: 83.33333333%;

    }

    .col-md-11 {

        width: 91.66666667%;

    }

    .col-md-12 {

        width: 100%;

    }

    .col-md-offset-12 {

        margin-left: 100%;

    }

    .col-md-offset-11 {

        margin-left: 91.66666667%;

    }

    .col-md-offset-10 {

        margin-left: 83.33333333%;

    }

    .col-md-offset-9 {

        margin-left: 75%;

    }

    .col-md-offset-8 {

        margin-left: 66.66666667%;

    }

    .col-md-offset-7 {

        margin-left: 58.33333333%;

    }

    .col-md-offset-6 {

        margin-left: 50%;

    }

    .col-md-offset-5 {

        margin-left: 41.66666667%;

    }

    .col-md-offset-4 {

        margin-left: 33.33333333%;

    }

    .col-md-offset-3 {

        margin-left: 25%;

    }

    .col-md-offset-2 {

        margin-left: 16.66666667%;

    }

    .col-md-offset-1 {

        margin-left: 8.33333333%;

    }

    .col-md-offset-0 {

        margin-left:;

    }

    .col-md-pull-12 {

        right: 100%;

    }

    .col-md-pull-11 {

        right: 91.66666667%;

    }

    .col-md-pull-10 {

        right: 83.33333333%;

    }

    .col-md-pull-9 {

        right: 75%;

    }

    .col-md-pull-8 {

        right: 66.66666667%;

    }

    .col-md-pull-7 {

        right: 58.33333333%;

    }

    .col-md-pull-6 {

        right: 50%;

    }

    .col-md-pull-5 {

        right: 41.66666667%;

    }

    .col-md-pull-4 {

        right: 33.33333333%;

    }

    .col-md-pull-3 {

        right: 25%;

    }

    .col-md-pull-2 {

        right: 16.66666667%;

    }

    .col-md-pull-1 {

        right: 8.33333333%;

    }

    .col-md-pull-0 {

        right: auto;

    }

    .col-md-push-12 {

        left: 100%;

    }

    .col-md-push-11 {

        left: 91.66666667%;

    }

    .col-md-push-10 {

        left: 83.33333333%;

    }

    .col-md-push-9 {

        left: 75%;

    }

    .col-md-push-8 {

        left: 66.66666667%;

    }

    .col-md-push-7 {

        left: 58.33333333%;

    }

    .col-md-push-6 {

        left: 50%;

    }

    .col-md-push-5 {

        left: 41.66666667%;

    }

    .col-md-push-4 {

        left: 33.33333333%;

    }

    .col-md-push-3 {

        left: 25%;

    }

    .col-md-push-2 {

        left: 16.66666667%;

    }

    .col-md-push-1 {

        left: 8.33333333%;

    }

    .col-md-push-0 {

        left: auto;

    }

}

/*lg*/

@media (min-width: 992px) {

    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {

        float: left;

    }

    .col-lg-1 {

        width: 8.33333333%;

    }

    .col-lg-2 {

        width: 16.66666667%;

    }

    .col-lg-3 {

        width: 25%;

    }

    .col-lg-4 {

        width: 33.33333333%;

    }

    .col-lg-5 {

        width: 41.66666667%;

    }

    .col-lg-6 {

        width: 50%;

    }

    .col-lg-7 {

        width: 58.33333333%;

    }

    .col-lg-8 {

        width: 66.66666667%;

    }

    .col-lg-9 {

        width: 75%;

    }

    .col-lg-10 {

        width: 83.33333333%;

    }

    .col-lg-11 {

        width: 91.66666667%;

    }

    .col-lg-12 {

        width: 100%;

    }

    .col-lg-offset-12 {

        margin-left: 100%;

    }

    .col-lg-offset-11 {

        margin-left: 91.66666667%;

    }

    .col-lg-offset-10 {

        margin-left: 83.33333333%;

    }

    .col-lg-offset-9 {

        margin-left: 75%;

    }

    .col-lg-offset-8 {

        margin-left: 66.66666667%;

    }

    .col-lg-offset-7 {

        margin-left: 58.33333333%;

    }

    .col-lg-offset-6 {

        margin-left: 50%;

    }

    .col-lg-offset-5 {

        margin-left: 41.66666667%;

    }

    .col-lg-offset-4 {

        margin-left: 33.33333333%;

    }

    .col-lg-offset-3 {

        margin-left: 25%;

    }

    .col-lg-offset-2 {

        margin-left: 16.66666667%;

    }

    .col-lg-offset-1 {

        margin-left: 8.33333333%;

    }

    .col-lg-offset-0 {

        margin-left:;

    }

    .col-lg-pull-12 {

        right: 100%;

    }

    .col-lg-pull-11 {

        right: 91.66666667%;

    }

    .col-lg-pull-10 {

        right: 83.33333333%;

    }

    .col-lg-pull-9 {

        right: 75%;

    }

    .col-lg-pull-8 {

        right: 66.66666667%;

    }

    .col-lg-pull-7 {

        right: 58.33333333%;

    }

    .col-lg-pull-6 {

        right: 50%;

    }

    .col-lg-pull-5 {

        right: 41.66666667%;

    }

    .col-lg-pull-4 {

        right: 33.33333333%;

    }

    .col-lg-pull-3 {

        right: 25%;

    }

    .col-lg-pull-2 {

        right: 16.66666667%;

    }

    .col-lg-pull-1 {

        right: 8.33333333%;

    }

    .col-lg-pull-0 {

        right: auto;

    }

    .col-lg-push-12 {

        left: 100%;

    }

    .col-lg-push-11 {

        left: 91.66666667%;

    }

    .col-lg-push-10 {

        left: 83.33333333%;

    }

    .col-lg-push-9 {

        left: 75%;

    }

    .col-lg-push-8 {

        left: 66.66666667%;

    }

    .col-lg-push-7 {

        left: 58.33333333%;

    }

    .col-lg-push-6 {

        left: 50%;

    }

    .col-lg-push-5 {

        left: 41.66666667%;

    }

    .col-lg-push-4 {

        left: 33.33333333%;

    }

    .col-lg-push-3 {

        left: 25%;

    }

    .col-lg-push-2 {

        left: 16.66666667%;

    }

    .col-lg-push-1 {

        left: 8.33333333%;

    }

    .col-lg-push-0 {

        left: auto;

    }

}

/*xl*/

@media (min-width: 1200px) {

    .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {

        float: left;

    }

    .col-xl-1 {

        width: 8.33333333%;

    }

    .col-xl-2 {

        width: 16.66666667%;

    }

    .col-xl-3 {

        width: 25%;

    }

    .col-xl-4 {

        width: 33.33333333%;

    }

    .col-xl-5 {

        width: 41.66666667%;

    }

    .col-xl-6 {

        width: 50%;

    }

    .col-xl-7 {

        width: 58.33333333%;

    }

    .col-xl-8 {

        width: 66.66666667%;

    }

    .col-xl-9 {

        width: 75%;

    }

    .col-xl-10 {

        width: 83.33333333%;

    }

    .col-xl-11 {

        width: 91.66666667%;

    }

    .col-xl-12 {

        width: 100%;

    }

    .col-xl-offset-12 {

        margin-left: 100%;

    }

    .col-xl-offset-11 {

        margin-left: 91.66666667%;

    }

    .col-xl-offset-10 {

        margin-left: 83.33333333%;

    }

    .col-xl-offset-9 {

        margin-left: 75%;

    }

    .col-xl-offset-8 {

        margin-left: 66.66666667%;

    }

    .col-xl-offset-7 {

        margin-left: 58.33333333%;

    }

    .col-xl-offset-6 {

        margin-left: 50%;

    }

    .col-xl-offset-5 {

        margin-left: 41.66666667%;

    }

    .col-xl-offset-4 {

        margin-left: 33.33333333%;

    }

    .col-xl-offset-3 {

        margin-left: 25%;

    }

    .col-xl-offset-2 {

        margin-left: 16.66666667%;

    }

    .col-xl-offset-1 {

        margin-left: 8.33333333%;

    }

    .col-xl-offset-0 {

        margin-left:;

    }

    .col-xl-pull-12 {

        right: 100%;

    }

    .col-xl-pull-11 {

        right: 91.66666667%;

    }

    .col-xl-pull-10 {

        right: 83.33333333%;

    }

    .col-xl-pull-9 {

        right: 75%;

    }

    .col-xl-pull-8 {

        right: 66.66666667%;

    }

    .col-xl-pull-7 {

        right: 58.33333333%;

    }

    .col-xl-pull-6 {

        right: 50%;

    }

    .col-xl-pull-5 {

        right: 41.66666667%;

    }

    .col-xl-pull-4 {

        right: 33.33333333%;

    }

    .col-xl-pull-3 {

        right: 25%;

    }

    .col-xl-pull-2 {

        right: 16.66666667%;

    }

    .col-xl-pull-1 {

        right: 8.33333333%;

    }

    .col-xl-pull-0 {

        right: auto;

    }

    .col-xl-push-12 {

        left: 100%;

    }

    .col-xl-push-11 {

        left: 91.66666667%;

    }

    .col-xl-push-10 {

        left: 83.33333333%;

    }

    .col-xl-push-9 {

        left: 75%;

    }

    .col-xl-push-8 {

        left: 66.66666667%;

    }

    .col-xl-push-7 {

        left: 58.33333333%;

    }

    .col-xl-push-6 {

        left: 50%;

    }

    .col-xl-push-5 {

        left: 41.66666667%;

    }

    .col-xl-push-4 {

        left: 33.33333333%;

    }

    .col-xl-push-3 {

        left: 25%;

    }

    .col-xl-push-2 {

        left: 16.66666667%;

    }

    .col-xl-push-1 {

        left: 8.33333333%;

    }

    .col-xl-push-0 {

        left: auto;

    }

}

.d-none {

    display: none !important;

}

.d-block {

    display: block !important;

}

/*sm*/

@media (min-width: 576px) {

    .d-sm-none {

        display: none !important;

    }

    .d-sm-block {

        display: block !important;

    }

}

/*md*/

@media (min-width: 768px) {

    .d-md-none {

        display: none !important;

    }

    .d-md-block {

        display: block !important;

    }

}

/*lg*/

@media (min-width: 992px) {

    .d-lg-none {

        display: none !important;

    }

    .d-lg-block {

        display: block !important;

    }

}

/*xl*/

@media (min-width: 1200px) {

    .d-xl-none {

        display: none !important;

    }

    .d-xl-block {

        display: block !important;

    }

}

.clearfix:after,

.clearfix:before,

.container:after,

.container:before,

.row:after,

.row:before {

    display: table;

    content: ' ';

}

.clearfix:after,

.container:after,

.row:after {

    clear: both;

}

index.css

/*-- 布局 start --*/

/*header*/

.header-container {

    background-color: #fff;

    border-bottom: 1px solid #dadada;

}

.header-logo-container,

.header-btn-container,

.header-nav-container {

    height: 64px;

}

.header-btn-container {

    display: flex;

    justify-content: flex-end;

    align-items: center;

}

/*nav*/

.nav-container {

    overflow: hidden;

    position: relative;

    top: -1px;

    height:;

    border-bottom: 1px solid #dadada;

    transition: height 0.5s;

}

.nav-container-extended {

    top:;

    height: 201px;

}

/*slider*/

.slider-container {

    margin-top: 20px;

    margin-bottom: 20px;

}

.slider-container .row {

    background-color: #f5f5f5;

    margin-left:;

    margin-right:;

}

@media (min-width: 768px) {

    .slider-container .row {

        display: flex;

        align-items: center;

    }

}

.slider-text-container {

    padding: 20px 0;

}

/*product*/

.product-container {

    margin-bottom: 20px;

}

/*backtop*/

.backtop-container {

    background-color: #fff;

    border-top: 1px solid #dadada;

    border-bottom: 1px solid #dadada;

}

/*helper*/

.helper-container {

    padding-top: 20px;

    padding-bottom: 10px;

    background-color: #f7f7f7;

    font-size: 12px;

    line-height:;

}

.helper-info-container {

    margin-bottom: 20px;

    line-height: 1.6;

}

.helper-backtop-container {

    margin-bottom: 10px;

}

/*footer*/

.footer-container {

    padding: 15px 0;

    background-color: #363636;

    color: #a6a6a6;

    font-size: 12px;

    line-height:;

}

/*-- 布局 end --*/

/*-- 组件 start --*/

/*btn-toggle*/

.btn-toggle {

    padding: 10px;

    background-color: transparent;

    border: none;

    border-radius: 4px;

    cursor: pointer;

}

.btn-toggle:hover {

    background-color: #f9f9f9;

}

.btn-toggle:hover .btn-toggle-bar {

    background-color: #1428a0;

}

.btn-toggle-bar {

    display: block;

    width: 24px;

    height: 4px;

    background-color: #363636;

    border-radius: 2px;

}

.btn-toggle-bar + .btn-toggle-bar {

    margin-top: 4px;

}

/*btn-rounded*/

.btn-rounded {

    display: inline-block;

    padding: 10px 30px;

    background-color: transparent;

    border: 1px solid #000;

    border-radius: 30px;

    color: #000;

    font-size: 16px;

    font-weight: bold;

    transition: all 0.3s;

}

.btn-rounded:hover {

    background-color: #000;

    color: #fff;

}

/*btn-backtop*/

.btn-backtop:after {

    content: '';

    position: relative;

    top: -2px;

    left: 5px;

    display: inline-block;

    width: 10px;

    height: 6px;

    background-image: url(../img/up.svg);

}

.btn-backtop:hover:after {

    background-image: url(../img/up-hover.svg);

}

/*btn-share*/

.btn-share {

    display: inline-block;

    width: 30px;

    height: 30px;

    background-size: 100% 100%;

}

.btn-share-weixin {

    background-image: url(../img/weixin.svg);

}

.btn-share-weixin:hover {

    background-image: url(../img/weixin-hover.svg);

}

.btn-share-weibo {

    background-image: url(../img/weibo.svg);

}

.btn-share-weibo:hover {

    background-image: url(../img/weibo-hover.svg);

}

/*-- 组件 end --*/

/*-- 内容 start --*/

/*header*/

.header-logo {

    display: flex;

    align-items: center;

    width: 136px;

    height: 100%;

}

.header-nav,

.header-nav-item,

.header-nav-link {

    height: 100%;

}

.header-nav {

    display: flex;

    justify-content: flex-end;

    font-size: 14px;

}

.header-nav-item {

    margin-left: 24px;

}

.header-nav-item:first-child {

    margin-left:;

}

.header-nav-link {

    display: flex;

    align-items: center;

    font-weight: bold;

}

/*nav*/

.nav-link {

    display: block;

    height: 40px;

    line-height: 40px;

    font-weight: bold;

}

/*slider*/

.slider-title,

.slider-subtitle,

.slider-btns {

    margin-bottom: 20px;

    text-align: center;

}

.slider-title {

    font-size: 30px;

}

.slider-subtitle {

    font-size: 20px;

    font-weight: normal;

}

.slider-btns .btn-rounded {

    margin-right: 10px;

    margin-bottom: 10px;

}

.slider-btns .btn-rounded:last-child {

    margin-right:;

}

/*product*/

.product-item {

    overflow: hidden;

    display: block;

}

.product-img {

    transition: transform 1s;

}

.product-img:hover {

    transform: scale(1.2);

}

/*backtop*/

.backtop-container .btn-backtop {

    display: block;

    padding: 18px 0;

    text-align: center;

}

/*helper*/

.helper-list-title {

    font-size: 16px;

}

.helper-list {

    margin-bottom: 10px;

}

.helper-list .btn-share {

    margin-top: 10px;

    margin-right: 12px;

}

.helper-list .btn-share:last-child {

    margin-right:;

}

/*footer*/

.footer-item {

    display: inline-block;

    margin-right: 20px;

}

.footer-item:last-child {

    margin-right:;

}

.footer-link {

    color: #fff;

    font-size: 14px;

    font-weight: bold;

}

.footer-link:hover {

    color: #fff;

    text-decoration: underline;

}

/*-- 内容 end --*/

方案2：用flex布局实现栅格系统

index-flex.html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>响应式布局--flex</title>

    <link rel="stylesheet" href="css/base.css">

    <link rel="stylesheet" href="css/grid-flex.css">

    <link rel="stylesheet" href="css/index.css">

</head>

<body>

    <header class="header-container">

        <div class="container">

            <div class="row">

                <div class="header-logo-container col-8 col-md-3">

                    <a href="./index.html" class="header-logo">

                        <img src="img/logo.svg" alt="logo">

                    </a>

                </div>

                <div class="header-btn-container col-4 d-md-none">

                    <button type="button" class="btn-toggle" id="btn-toggle">

                        <span class="btn-toggle-bar"></span>

                        <span class="btn-toggle-bar"></span>

                        <span class="btn-toggle-bar"></span>

                    </button>

                </div>

                <nav class="header-nav-container col-md-9 d-none d-md-block">

                    <ul class="header-nav">

                        <li class="header-nav-item">

                            <a href="###" class="header-nav-link">手机&amp;平板</a>

                        </li>

                        <li class="header-nav-item">

                            <a href="###" class="header-nav-link">电视&amp;影音</a>

                        </li>

                        <li class="header-nav-item">

                            <a href="###" class="header-nav-link">生活家电</a>

                        </li>

                        <li class="header-nav-item">

                            <a href="###" class="header-nav-link">电脑/办公/存储</a>

                        </li>

                        <li class="header-nav-item">

                            <a href="###" class="header-nav-link">网上商城</a>

                        </li>

                    </ul>

                </nav>

            </div>

        </div>

    </header>

    <nav class="nav-container d-md-none" id="nav">

        <ul class="container">

            <li><a href="###" class="nav-link">手机&amp;平板</a></li>

            <li><a href="###" class="nav-link">电视&amp;影音</a></li>

            <li><a href="###" class="nav-link">生活家电</a></li>

            <li><a href="###" class="nav-link">电脑/办公/存储</a></li>

            <li><a href="###" class="nav-link">网上商城</a></li>

        </ul>

    </nav>

    <div class="slider-container">

        <div class="container">

            <div class="row">

                <div class="slider-text-container col-md-5 col-md-order-last">

                    <h3 class="slider-title">Galaxy S9｜S9+</h3>

                    <h4 class="slider-subtitle">冰蓝 焕新上市</h4>

                    <div class="slider-btns">

                        <a href="###" class="btn-rounded">了解更多</a>

                        <a href="###" class="btn-rounded">立即购买</a>

                    </div>

                </div>

                <div class="col-md-7 col-md-order-first">

                    <img src="img/1.png" alt="cellphone">

                </div>

            </div>

        </div>

    </div>

    <div class="product-container">

        <div class="container">

            <div class="row">

                <div class="col-md">

                    <a href="###" class="product-item">

                        <img src="img/2-1.jpg" alt="cellphone" class="product-img">

                    </a>

                </div>

                <div class="col-md">

                    <a href="###" class="product-item">

                        <img src="img/2-2.jpg" alt="cellphone" class="product-img">

                    </a>

                </div>

                <div class="col-md">

                    <a href="###" class="product-item">

                        <img src="img/2-3.jpg" alt="cellphone" class="product-img">

                    </a>

                </div>

            </div>

        </div>

    </div>

    <div class="backtop-container d-md-none">

        <a href="#" class="btn-backtop">回到顶部</a>

    </div>

    <div class="helper-container">

        <div class="container">

            <div class="helper-info-container">

                <p>* Galaxy A9s具备后置四摄功能，Galaxy A6s为后置双摄产品。</p>

                <p>* Galaxy S9 | S9+广告中手机背面图是Galaxy S9+，Galaxy S9为背面单摄像头产品。</p>

                <p>* 本网站的产品图片以及型号、数据、功能、性能、规格参数等仅供参考，三星有可能对上述内容进行改进，具体信息请参照产品实物、产品说明书。</p>

                <p>* 除非经特殊说明，本网站中所涉及的数据均为三星内部测试结果，涉及的对比均为与三星产品相比较。</p>

            </div>

            <div class="row">

                <div class="helper-backtop-container col-md-2 col-md-offset-10 d-none d-md-block">

                    <a href="#" class="btn-backtop">回到顶部</a>

                </div>

            </div>

            <div class="row">

                <div class="col-6 col-md">

                    <h3 class="helper-list-title">网站地图</h3>

                    <ul class="helper-list">

                        <li><a href="###">关于三星</a></li>

                        <li><a href="###">投资者关系</a></li>

                        <li><a href="###">新闻中心</a></li>

                        <li><a href="###">人才招聘</a></li>

                        <li><a href="###">三星开发者网站</a></li>

                    </ul>

                </div>

                <div class="col-6 col-md">

                    <h3 class="helper-list-title">三星商店</h3>

                    <ul class="helper-list">

                        <li><a href="###">网上商城</a></li>

                        <li><a href="###">最新活动</a></li>

                        <li><a href="###">授权体验店</a></li>

                        <li><a href="###">全产品专卖店</a></li>

                        <li><a href="###">三星视频空间</a></li>

                    </ul>

                </div>

                <div class="col-6 col-md">

                    <h3 class="helper-list-title">服务支持</h3>

                    <ul class="helper-list">

                        <li><a href="###">在线服务</a></li>

                        <li><a href="###">邮件咨询</a></li>

                        <li><a href="###">联系我们</a></li>

                        <li><a href="###">服务中心查询</a></li>

                        <li><a href="###">三星专卖店招募</a></li>

                    </ul>

                </div>

                <div class="col-6 col-md">

                    <h3 class="helper-list-title">官方分享</h3>

                    <ul class="helper-list">

                        <li>

                            <a href="###" class="btn-share btn-share-weixin"></a>

                            <a href="###" class="btn-share btn-share-weibo"></a>

                        </li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

    <div class="footer-container">

        <div class="container">

            <div class="row">

                <div class="col-md-10">

                    <ul>

                        <li class="footer-item">

                            <a href="###" class="footer-link">服务条款</a>

                        </li>

                        <li class="footer-item">

                            <a href="###" class="footer-link">重要声明</a>

                        </li>

                        <li class="footer-item">

                            <a href="###" class="footer-link">隐私政策</a>

                        </li>

                    </ul>

                </div>

                <div class="col-md-2">

                    <a href="###" class="footer-link">中国/中文 &gt;</a>

                </div>

            </div>

            <div>

                <p>此网页最好使用IE10浏览器、Chrome浏览器、Safari浏览器或其他新式浏览器进行浏览</p>

                <p>京ICP备05068163号 京公网安备110105011756号</p>

            </div>

        </div>

    </div>

    <script>

        var nav = document.getElementById('nav');

        var navExtendedClassName = 'nav-container-extended';

        document.getElementById('btn-toggle').onclick = function() {

            // nav.className += ' ' + navExtendedClassName;

            if (nav.classList.contains(navExtendedClassName)) { // 收起

                nav.classList.remove(navExtendedClassName);

            } else { // 展开

                nav.classList.add(navExtendedClassName);

            }

        };

    </script>

</body>

</html>

grid-flex.css

.container {

    width: 100%;

    padding-left: 15px;

    padding-right: 15px;

    margin-left: auto;

    margin-right: auto;

}

/*sm*/

@media (min-width: 576px) {

    .container {

        width: 540px;

    }

}

/*md*/

@media (min-width: 768px) {

    .container {

        width: 720px;

    }

}

/*lg*/

@media (min-width: 992px) {

    .container {

        width: 960px;

    }

}

/*xl*/

@media (min-width: 1200px) {

    .container {

        width: 1140px;

    }

}

.row {

    display: flex;

    flex-wrap: wrap;

    margin-left: -15px;

    margin-right: -15px;

}

.col, .col-sm, .col-md, .col-lg, .clo-xl,

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,

.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,

.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {

    width: 100%;

    padding-left: 15px;

    padding-right: 15px;

}

.col {

    flex-basis:;

    flex-grow:;

}

.col-1 {

    flex: 0 0 8.33333333%;

}

.col-2 {

    flex: 0 0 16.66666667%;

}

.col-3 {

    flex: 0 0 25%;

}

.col-4 {

    flex: 0 0 33.33333333%;

}

.col-5 {

    flex: 0 0 41.66666667%;

}

.col-6 {

    flex: 0 0 50%;

}

.col-7 {

    flex: 0 0 58.33333333%;

}

.col-8 {

    flex: 0 0 66.66666667%;

}

.col-9 {

    flex: 0 0 75%;

}

.col-10 {

    flex: 0 0 83.33333333%;

}

.col-11 {

    flex: 0 0 91.66666667%;

}

.col-12 {

    flex: 0 0 100%;

}

.col-offset-12 {

    margin-left: 100%;

}

.col-offset-11 {

    margin-left: 91.66666667%;

}

.col-offset-10 {

    margin-left: 83.33333333%;

}

.col-offset-9 {

    margin-left: 75%;

}

.col-offset-8 {

    margin-left: 66.66666667%;

}

.col-offset-7 {

    margin-left: 58.33333333%;

}

.col-offset-6 {

    margin-left: 50%;

}

.col-offset-5 {

    margin-left: 41.66666667%;

}

.col-offset-4 {

    margin-left: 33.33333333%;

}

.col-offset-3 {

    margin-left: 25%;

}

.col-offset-2 {

    margin-left: 16.66666667%;

}

.col-offset-1 {

    margin-left: 8.33333333%;

}

.col-offset-0 {

    margin-left:;

}

.col-order-first {

    order: -1;

}

.col-order-last {

    order:;

}

.col-order-0 {

    order:;

}

.col-order-1 {

    order:;

}

.col-order-2 {

    order:;

}

.col-order-3 {

    order:;

}

.col-order-4 {

    order:;

}

.col-order-5 {

    order:;

}

.col-order-6 {

    order:;

}

.col-order-7 {

    order:;

}

.col-order-8 {

    order:;

}

.col-order-9 {

    order:;

}

.col-order-10 {

    order:;

}

.col-order-11 {

    order:;

}

.col-order-12 {

    order:;

}

/*sm*/

@media (min-width: 576px) {

    .col-sm {

        flex-basis:;

        flex-grow:;

    }

    .col-sm-1 {

        flex: 0 0 8.33333333%;

    }

    .col-sm-2 {

        flex: 0 0 16.66666667%;

    }

    .col-sm-3 {

        flex: 0 0 25%;

    }

    .col-sm-4 {

        flex: 0 0 33.33333333%;

    }

    .col-sm-5 {

        flex: 0 0 41.66666667%;

    }

    .col-sm-6 {

        flex: 0 0 50%;

    }

    .col-sm-7 {

        flex: 0 0 58.33333333%;

    }

    .col-sm-8 {

        flex: 0 0 66.66666667%;

    }

    .col-sm-9 {

        flex: 0 0 75%;

    }

    .col-sm-10 {

        flex: 0 0 83.33333333%;

    }

    .col-sm-11 {

        flex: 0 0 91.66666667%;

    }

    .col-sm-12 {

        flex: 0 0 100%;

    }

    .col-sm-offset-12 {

        margin-left: 100%;

    }

    .col-sm-offset-11 {

        margin-left: 91.66666667%;

    }

    .col-sm-offset-10 {

        margin-left: 83.33333333%;

    }

    .col-sm-offset-9 {

        margin-left: 75%;

    }

    .col-sm-offset-8 {

        margin-left: 66.66666667%;

    }

    .col-sm-offset-7 {

        margin-left: 58.33333333%;

    }

    .col-sm-offset-6 {

        margin-left: 50%;

    }

    .col-sm-offset-5 {

        margin-left: 41.66666667%;

    }

    .col-sm-offset-4 {

        margin-left: 33.33333333%;

    }

    .col-sm-offset-3 {

        margin-left: 25%;

    }

    .col-sm-offset-2 {

        margin-left: 16.66666667%;

    }

    .col-sm-offset-1 {

        margin-left: 8.33333333%;

    }

    .col-sm-offset-0 {

        margin-left:;

    }

    .col-sm-order-first {

        order: -1;

    }

    .col-sm-order-last {

        order:;

    }

    .col-sm-order-0 {

        order:;

    }

    .col-sm-order-1 {

        order:;

    }

    .col-sm-order-2 {

        order:;

    }

    .col-sm-order-3 {

        order:;

    }

    .col-sm-order-4 {

        order:;

    }

    .col-sm-order-5 {

        order:;

    }

    .col-sm-order-6 {

        order:;

    }

    .col-sm-order-7 {

        order:;

    }

    .col-sm-order-8 {

        order:;

    }

    .col-sm-order-9 {

        order:;

    }

    .col-sm-order-10 {

        order:;

    }

    .col-sm-order-11 {

        order:;

    }

    .col-sm-order-12 {

        order:;

    }

}

/*md*/

@media (min-width: 768px) {

    .col-md {

        flex-basis:;

        flex-grow:;

    }

    .col-md-1 {

        flex: 0 0 8.33333333%;

    }

    .col-md-2 {

        flex: 0 0 16.66666667%;

    }

    .col-md-3 {

        flex: 0 0 25%;

    }

    .col-md-4 {

        flex: 0 0 33.33333333%;

    }

    .col-md-5 {

        flex: 0 0 41.66666667%;

    }

    .col-md-6 {

        flex: 0 0 50%;

    }

    .col-md-7 {

        flex: 0 0 58.33333333%;

    }

    .col-md-8 {

        flex: 0 0 66.66666667%;

    }

    .col-md-9 {

        flex: 0 0 75%;

    }

    .col-md-10 {

        flex: 0 0 83.33333333%;

    }

    .col-md-11 {

        flex: 0 0 91.66666667%;

    }

    .col-md-12 {

        flex: 0 0 100%;

    }

    .col-md-offset-12 {

        margin-left: 100%;

    }

    .col-md-offset-11 {

        margin-left: 91.66666667%;

    }

    .col-md-offset-10 {

        margin-left: 83.33333333%;

    }

    .col-md-offset-9 {

        margin-left: 75%;

    }

    .col-md-offset-8 {

        margin-left: 66.66666667%;

    }

    .col-md-offset-7 {

        margin-left: 58.33333333%;

    }

    .col-md-offset-6 {

        margin-left: 50%;

    }

    .col-md-offset-5 {

        margin-left: 41.66666667%;

    }

    .col-md-offset-4 {

        margin-left: 33.33333333%;

    }

    .col-md-offset-3 {

        margin-left: 25%;

    }

    .col-md-offset-2 {

        margin-left: 16.66666667%;

    }

    .col-md-offset-1 {

        margin-left: 8.33333333%;

    }

    .col-md-offset-0 {

        margin-left:;

    }

    .col-md-order-first {

        order: -1;

    }

    .col-md-order-last {

        order:;

    }

    .col-md-order-0 {

        order:;

    }

    .col-md-order-1 {

        order:;

    }

    .col-md-order-2 {

        order:;

    }

    .col-md-order-3 {

        order:;

    }

    .col-md-order-4 {

        order:;

    }

    .col-md-order-5 {

        order:;

    }

    .col-md-order-6 {

        order:;

    }

    .col-md-order-7 {

        order:;

    }

    .col-md-order-8 {

        order:;

    }

    .col-md-order-9 {

        order:;

    }

    .col-md-order-10 {

        order:;

    }

    .col-md-order-11 {

        order:;

    }

    .col-md-order-12 {

        order:;

    }

}

/*lg*/

@media (min-width: 992px) {

    .col-lg {

        flex-basis:;

        flex-grow:;

    }

    .col-lg-1 {

        flex: 0 0 8.33333333%;

    }

    .col-lg-2 {

        flex: 0 0 16.66666667%;

    }

    .col-lg-3 {

        flex: 0 0 25%;

    }

    .col-lg-4 {

        flex: 0 0 33.33333333%;

    }

    .col-lg-5 {

        flex: 0 0 41.66666667%;

    }

    .col-lg-6 {

        flex: 0 0 50%;

    }

    .col-lg-7 {

        flex: 0 0 58.33333333%;

    }

    .col-lg-8 {

        flex: 0 0 66.66666667%;

    }

    .col-lg-9 {

        flex: 0 0 75%;

    }

    .col-lg-10 {

        flex: 0 0 83.33333333%;

    }

    .col-lg-11 {

        flex: 0 0 91.66666667%;

    }

    .col-lg-12 {

        flex: 0 0 100%;

    }

    .col-lg-offset-12 {

        margin-left: 100%;

    }

    .col-lg-offset-11 {

        margin-left: 91.66666667%;

    }

    .col-lg-offset-10 {

        margin-left: 83.33333333%;

    }

    .col-lg-offset-9 {

        margin-left: 75%;

    }

    .col-lg-offset-8 {

        margin-left: 66.66666667%;

    }

    .col-lg-offset-7 {

        margin-left: 58.33333333%;

    }

    .col-lg-offset-6 {

        margin-left: 50%;

    }

    .col-lg-offset-5 {

        margin-left: 41.66666667%;

    }

    .col-lg-offset-4 {

        margin-left: 33.33333333%;

    }

    .col-lg-offset-3 {

        margin-left: 25%;

    }

    .col-lg-offset-2 {

        margin-left: 16.66666667%;

    }

    .col-lg-offset-1 {

        margin-left: 8.33333333%;

    }

    .col-lg-offset-0 {

        margin-left:;

    }

    .col-lg-order-first {

        order: -1;

    }

    .col-lg-order-last {

        order:;

    }

    .col-lg-order-0 {

        order:;

    }

    .col-lg-order-1 {

        order:;

    }

    .col-lg-order-2 {

        order:;

    }

    .col-lg-order-3 {

        order:;

    }

    .col-lg-order-4 {

        order:;

    }

    .col-lg-order-5 {

        order:;

    }

    .col-lg-order-6 {

        order:;

    }

    .col-lg-order-7 {

        order:;

    }

    .col-lg-order-8 {

        order:;

    }

    .col-lg-order-9 {

        order:;

    }

    .col-lg-order-10 {

        order:;

    }

    .col-lg-order-11 {

        order:;

    }

    .col-lg-order-12 {

        order:;

    }

}

/*xl*/

@media (min-width: 1200px) {

    .col-xl {

        flex-basis:;

        flex-grow:;

    }

    .col-xl-1 {

        flex: 0 0 8.33333333%;

    }

    .col-xl-2 {

        flex: 0 0 16.66666667%;

    }

    .col-xl-3 {

        flex: 0 0 25%;

    }

    .col-xl-4 {

        flex: 0 0 33.33333333%;

    }

    .col-xl-5 {

        flex: 0 0 41.66666667%;

    }

    .col-xl-6 {

        flex: 0 0 50%;

    }

    .col-xl-7 {

        flex: 0 0 58.33333333%;

    }

    .col-xl-8 {

        flex: 0 0 66.66666667%;

    }

    .col-xl-9 {

        flex: 0 0 75%;

    }

    .col-xl-10 {

        flex: 0 0 83.33333333%;

    }

    .col-xl-11 {

        flex: 0 0 91.66666667%;

    }

    .col-xl-12 {

        flex: 0 0 100%;

    }

    .col-xl-offset-12 {

        margin-left: 100%;

    }

    .col-xl-offset-11 {

        margin-left: 91.66666667%;

    }

    .col-xl-offset-10 {

        margin-left: 83.33333333%;

    }

    .col-xl-offset-9 {

        margin-left: 75%;

    }

    .col-xl-offset-8 {

        margin-left: 66.66666667%;

    }

    .col-xl-offset-7 {

        margin-left: 58.33333333%;

    }

    .col-xl-offset-6 {

        margin-left: 50%;

    }

    .col-xl-offset-5 {

        margin-left: 41.66666667%;

    }

    .col-xl-offset-4 {

        margin-left: 33.33333333%;

    }

    .col-xl-offset-3 {

        margin-left: 25%;

    }

    .col-xl-offset-2 {

        margin-left: 16.66666667%;

    }

    .col-xl-offset-1 {

        margin-left: 8.33333333%;

    }

    .col-xl-offset-0 {

        margin-left:;

    }

    .col-xl-order-first {

        order: -1;

    }

    .col-xl-order-last {

        order:;

    }

    .col-xl-order-0 {

        order:;

    }

    .col-xl-order-1 {

        order:;

    }

    .col-xl-order-2 {

        order:;

    }

    .col-xl-order-3 {

        order:;

    }

    .col-xl-order-4 {

        order:;

    }

    .col-xl-order-5 {

        order:;

    }

    .col-xl-order-6 {

        order:;

    }

    .col-xl-order-7 {

        order:;

    }

    .col-xl-order-8 {

        order:;

    }

    .col-xl-order-9 {

        order:;

    }

    .col-xl-order-10 {

        order:;

    }

    .col-xl-order-11 {

        order:;

    }

    .col-xl-order-12 {

        order:;

    }

}

.d-none {

    display: none !important;

}

.d-block {

    display: block !important;

}

/*sm*/

@media (min-width: 576px) {

    .d-sm-none {

        display: none !important;

    }

    .d-sm-block {

        display: block !important;

    }

}

/*md*/

@media (min-width: 768px) {

    .d-md-none {

        display: none !important;

    }

    .d-md-block {

        display: block !important;

    }

}

/*lg*/

@media (min-width: 992px) {

    .d-lg-none {

        display: none !important;

    }

    .d-lg-block {

        display: block !important;

    }

}

/*xl*/

@media (min-width: 1200px) {

    .d-xl-none {

        display: none !important;

    }

    .d-xl-block {

        display: block !important;

    }

}

base.css和index.css方案1里的一样一样的

使用栅格系统和flex布局开发响应式页面源码的更多相关文章

  1. FLEX 网格布局及响应式处理

    上一篇文章用Flex实现BorderLayout,这一章我们来实现常用的网格布局和响应式处理. 首先我们定义HTML结构,主Box为grid,每项为grid-cell,下面就是我们HTML代码结构. ...

  2. flex布局开发

    flex布局开发 布局原理 flex时flexible Box的缩写,意为"弹性布局",用来为盒子模型提供最大的灵活性,任何一个容器都可以定位flex布局 [注意] 当我们为父盒子 ...

  3. 前端（八）—— 高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

    高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...

  4. 使用ConstraintLayout(约束布局)构建响应式UI

    使用ConstraintLayout(约束布局)构建响应式UI 转 https://www.300168.com/yidong/show-2740.html     核心提示:ConstraintLa ...

  5. Windows10 UWP开发 - 响应式设计

      Windows10 UWP开发 - 响应式设计 本篇随笔与大家简单讨论一下在开发适配不同分辨率.宽高比的Windows10 Universal App布局时的可行方式与小技巧.经验均从实践中总结, ...

  6. 使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等

    "使用Bootstrap 3开发响应式网站实践"系列,将使用Bootstrap 3.2制作一个自适应网站,无论是在电脑.平板,还是手机上,都呈现比较好的效果.在电脑浏览器上的最终效 ...

  7. 7 个 Bootstrap 在线编辑器用于快速开发响应式网站

    Bootstrap 已经使响应式网站开发变得简单很多. 但是如果你不必手动写全部代码,事情会如何呢? 如果你可以自由地选择你想要使用的Bootstrap 组件.并可以把它们拖拽到画布中,事情会如何呢? ...

  8. html响应式布局，css响应式布局，响应式布局入门

    html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...

  9. 使用Bootstrap 3开发响应式网站实践07,页脚

    页脚部分比较简单,把一个12列的Grid切分. <footer> <div class="container"> <div class="r ...

随机推荐

  1. 机器学习总结-LR（对数几率回归）

    LR(对数几率回归) 函数为\(y=f(x)=\frac{1}{1+e^{-(w^{T}x+b)}}\). 由于输出的是概率值\(p(y=1|x)=\frac{e^{w^{T}x+b}}{1+e^{w ...

  2. learn about sqlserver files and filegroup

    The filegroup is similar as tablespace in Oracle. At first, I will show that hot to check file amd f ...

  3. 《Head First Java（第二版）》中文版 分享下载

    书籍信息 书名:<Head First Java(第二版)>中文版 作者: Kathy Sierra,Bert Bates 著 / 杨尊一 编译 张然等 改编 豆瓣评分:8.7分 内容简介 ...

  4. 《Head first设计模式》之命令模式

    命令模式将"请求"封装成对象,以便使用不同的请求.队列或者日志来参数化其他对象.命令模式也支持可撤销的操作. 一个家电公司想邀请你设计一个家电自动化遥控器的API.这个遥控器有7个 ...

  5. Python 模拟登录几种常见方法

    方法一:直接使用已知的cookie访问 优点: 简单,但需要先在浏览器登录 原理: 简单地说,cookie保存在发起请求的客户端中,服务器利用cookie来区分不同的客户端.因为http是一种无状态的 ...

  6. 解释为什么不能依赖fail-fast

    我的观点fail-fast是什么就不多解释了,应该注意到的是(以ArrayList为例):modCount位于AbstractList中, protected transient int modCou ...

  7. javascript js获取html元素各种距离方法

    //滚动条 scrollLeft//滚动条距左边距离 scrollTop//滚动条距顶部距离 scrollWidth//滚动条元素的宽 scrollHeight//滚动条元素的高 //可视范围 cli ...

  8. 关于开源，Git，Github

    在Github和Git上fork之简单指南 https://linux.cn/article-4292-1.html,中文翻译 https://www.dataschool.io/simple-gui ...

  9. 使用Unicode(宽字节字符集)；多字节字符集中定义宽字节变量

    2012-03-25 14:54 (分类:计算机程序) 2.2 宽字符和C 宽字符不一定是Unicode.Unicode是宽字符集的一种.然而,因为本书的焦点是Windows而不是C执行的理论,所以书 ...

  10. 常用传输层协议(tcp/ip+udp)与常用应用层协议简述(http)

    一.计算机网络体系结构 二.TCP与UDP差异 1.TCP是面向连接的可靠传输,UDP是面向无连接的不可靠传输 面向连接表现在3次握手,4次挥手:可靠传输表现在未进行4次挥手时的差错重传,超时重传: ...