CSS使用栅格布局实现页面大小自适应

最近在学习css的页面自适应，也就是不同大小的页面下，页面的样式会随之改变，这块在之前其实主要是用了bootstrap的栅格布局。通过自己的学习，现在对这块的认知就更加清楚了。首先自己实现了一个给予flex的自适应布局的功能。然后基于这个功能在完善一下网页的头部导航。相信下面这种样式，很多人都看见过。在不同的尺寸下可以实现不同的展示。

下面我就记录一下自己的实现过程（这里就不记录关于grid的实现了） 关于响应式的尺寸问题，借鉴了网上的一些说明，我的尺寸样式如下

基于上面的尺寸 首先定义的是网页的header区域，我预设的高度是120px

    <header class="header-container">
        <div class="container">
            <div class="row">
                ....
            </div>
        </div>
    </header>

在头部区域我需要定义3个区域，一个展示logo，一个展示文字菜单、一个展示最小化的三条竖线菜单。

logo区域的展示

这块比较简单，主要就是a标签嵌套h1即可代码如下

<div class="header-logo-container col-9 col-md-12 col-lg-3">
    <a href="./index.html" class="header-logo">
        <h1>佩恩的博客</h1>
    </a>
</div>

注意在class里面的几个参数

• header-logo-container 是我自己定义的，方便我增加修改样式
• col-9 是在最小的屏幕尺寸（xs）下 占据九个栅格。
• col-md-12 是在中屏尺寸（md）下占据12个栅格。
• col-lg-3 是在大屏及以上占据3个栅格

按钮菜单

按钮菜单我的预期是只有在页面缩小到小屏寸才会出现，也就是在中屏及以上尺寸都是隐藏状态的

<div class="nav-btn-container col-3 d-md-none">
    <button type="button" class="nav-btn" id="nav-btn">
        <span class="nav-btn-bar"></span>
        <span class="nav-btn-bar"></span>
        <span class="nav-btn-bar"></span>
    </button>
</div>

• nav-btn-container 是我自己定义的，方便我增加修改样式
• col-3 是页面在小屏尺寸下占据3个栅格（上面的logo是在小屏尺寸占据9个）
• col-md-none 这个区域在中屏及以上尺寸隐藏，也就是只有小屏和超小屏才显示

文字菜单

这块区域是只有在中屏及以上才进行展示

<div class="header-nav-container col-md-12 col-lg-9 d-none d-md-block">
    <ul class="nav-item">
        <li class="nav-class"><a href="./index.html">首页</a></li>
        <li class="nav-class"><a href="#">我的博客</a></li>
        <li class="nav-class"><a href="#">文章</a></li>
        <li class="nav-class"><a href="#">推荐</a></li>
        <li class="nav-class"><a href="#">关于我</a></li>
        <li class="nav-class"><a href="#">留言</a></li>
    </ul>
</div>

• header-nav-container 是我自己定义的，方便我增加修改样式
• col-md-12 的意思是中屏占据一整行（一行最多12个栅格）
• col-lg-9 大屏及以上占据最多9个栅格（上面的logo是占据3个）
• d-none 小屏&超小屏下隐藏这个区域
• d-md-block 在中屏及以上显示

如果上面的都看明白了，那其实已经完成。 下面上完整的代码

    <header class="header-container">
        <div class="container">
            <div class="row">
                <div class="header-logo-container col-9 col-md-12 col-lg-3">
                    <a href="./index.html" class="header-logo"><h1>佩恩的博客</h1></a>
                </div>

                <div class="nav-btn-container col-3 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>

                <div class="header-nav-container col-md-12 col-lg-9 d-none d-md-block">
                    <ul class="nav-item">
                        <li class="nav-class"><a href="./index.html">首页</a></li>
                        <li class="nav-class"><a href="#">我的博客</a></li>
                        <li class="nav-class"><a href="#">文章</a></li>
                        <li class="nav-class"><a href="#">推荐</a></li>
                        <li class="nav-class"><a href="#">关于我</a></li>
                        <li class="nav-class"><a href="#">留言</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>

CSS 样式如下

.header-container {
  height: 120px;
  background-color: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-logo-container,
.nav-btn-container,
.header-nav-container
{
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-logo-container a{
  padding: 0 20px;
}
.header-logo-container h1{
  font-size: 1.5rem;
  font-weight: bold;
  color: #ca0100;
}
.header-nav-container , .nav-item{
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-class{
  margin-left: 10px;
}
.nav-class:first-child{
  margin-left: 0;
}
.nav-class a{
  padding: 0 20px;
  color: #000;
  font-size: 1rem;
}

关于小屏下面的三个btn-toggle-bar的实现，我是用的CSS3的动画来实现的，毕竟能用CSS实现的，就尽量少用图片实现。实现也比较简单。代码如下

.btn-toggle{
  padding: 10px;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.btn-toggle:hover{
  background-color: #f9f9f9;
}
.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-toggle:hover .btn-toggle-bar{
  background-color: #1428a0;
}

以上代码就实现了整体的网页导航条自适应。