精通 CSS 第 8 章 响应式布局 学习案例

Posted GoldenaArcher

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了精通 CSS 第 8 章 响应式布局 学习案例相关的知识，希望对你有一定的参考价值。

精通 CSS 第 8 章 响应式布局 学习案例

响应式的学习案例总共做了 3 个，一个是 flex 的响应式，还有两个是将之前在 精通 CSS 第 7 章学习笔记（上） 和 精通 CSS 第 7 章学习笔记（下） 中做的两个案例转化为响应式。

flexbox 的响应式

flexbox 好像是没有媒体查询（media query）——至少书上是这么说的。不过 flexbox 本身就有自适应的特效，对于很多不以屏幕尺寸不敏感，而对元素盒子尺寸更加敏感的内容就比较友好了。

文中的例子是一个类似购物车中的商品模式，可以点击 +/- 修改商品数量，如下：

flex-wide

正常情况下需求其实只有两个：盒子宽度够的时候放在同一行，不够的时候折行：

flex-narrow

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .cart-item {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;
      }
      .product-name,
      .control-items {
        box-sizing: border-box;
        color: #fff;
      }
      .product-name {
        padding: 10px;
        flex: 1 0 17em;
        background-color: #1f85de;
      }
      .control-items {
        flex: 1 0 4em;
        display: flex;
        background-color: #1f85de;
      }
      .control-item {
        flex: 1;
        padding: 10px;
        text-align: center;
      }
      .increse-quantity {
        background-color: #287dc6;
      }
      .decrease-quantity {
        background-color: #2c72af;
      }
    </style>
  </head>
  <body>
    <ul class="cart-items">
      <li class="cart-item">
        <div class="product-name">花花公子短袖t恤</div>
        <div class="control-items">
          <span class="control-item increse-quantity">+</span>
          <span class="control-item decrease-quantity">-</span>
        </div>
      </li>
      <li class="cart-item">
        <div class="product-name">花花公子短袖t恤</div>
        <div class="control-items">
          <span class="control-item increse-quantity">+</span>
          <span class="control-item decrease-quantity">-</span>
        </div>
      </li>
      <li class="cart-item">
        <div class="product-name">花花公子短袖t恤</div>
        <div class="control-items">
          <span class="control-item increse-quantity">+</span>
          <span class="control-item decrease-quantity">-</span>
        </div>
      </li>
      <li class="cart-item">
        <div class="product-name">花花公子短袖t恤</div>
        <div class="control-items">
          <span class="control-item increse-quantity">+</span>
          <span class="control-item decrease-quantity">-</span>
        </div>
      </li>
      <li class="cart-item">
        <div class="product-name">花花公子短袖t恤</div>
        <div class="control-items">
          <span class="control-item increse-quantity">+</span>
          <span class="control-item decrease-quantity">-</span>
        </div>
      </li>
    </ul>
  </body>
</html>

Flexbox 折行的难点，或是说痛点还是在于需要理解 flex: 1 0 4em; 这个语法，即 flex-grow, flex-shrink 和 flex-basis。

大多数情况下用得到的响应式

即使用非 flexbox、非网格布局为主的布局方式。

HTML 部分维持一致没有任何的修改，改的地方在 CSS 部分，这也再一次说明了结构和样式分离的重要性——就算是修改布局，HTML 部分没有必要动，只需要修改 CSS 就好了。

总共做了 3 个部分的适配：小屏幕/手机，中屏幕/平板，大屏幕/PC 或高像素平板。

使用的依旧是移动优先，先从小屏幕开始实现：

layout1.1

这种情况下，其实不做额外的适配效果看起来都还不错——毕竟屏幕小，放的东西也少。

随后推进到中屏幕：

layout1.2

对于中屏幕的布局来说，可以将图片较小的文章进行合并，以节省空间。

大屏幕我将标题放在了内容的上方：

layout1.3

完整版的 CSS 在下面，这是经过清理后的版本：

* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
body {
  line-height: 1.375;
  font-family: Georgia, Times New Roman, Times, serif;
}
.wrapper {
  width: 95%;
  max-width: 76em;
  margin: 0 auto;
}
.clearfix::after,
.clearfix::before {
  content: "";
  display: block;
}
.clearfix::after {
  clear: both;
}

.masthead {
  background-color: #8e3339;
}
.masthead h1 {
  margin: 0;
  padding: 0.5em 0;
  color: #fff;
}
.navbar {
  background-color: #5e2126;
  margin-bottom: 1.375em;
}
.navlist {
  display: flex;
  background-color: #752a2f;
}
.navlist li {
  flex: 1;
  text-transform: uppercase;
  text-align: center;
  box-sizing: border-box;
}
.navlist li a {
  display: block;
  line-height: 1.75em;
  padding: 0.5em;
  color: #fff;
}

.story {
  min-height: 100px;
}
.story h3 {
  margin-bottom: 1em;
}
.story h3 a {
  color: #8e3339;
}
.story {
  margin-bottom: 0.6875em;
  padding: 0.6875em;
  background-color: #eee;
}
.story img {
  width: 100%;
}

@media (min-width: 35em) {
  .row-quartet > * {
    float: left;
    width: 50%;
  }
  .row-trio > * {
    float: left;
    width: 33.333%;
  }
  .story {
    margin: 0.6875em;
  }
  .subcategory-featured {
    width: 100%;
  }
}

@media (min-width: 50em) {
  .row-quartet > * {
    width: 25%;
  }
  .subcategory-featured {
    width: 50%;
  }
}

网格布局的响应式

网格布局的实施思路是一样的，在常见的布局修改的是宽度，在网格布局可以直接修改模板，如下：

/* 省略头部和其他部分的样式 */
.content-area1,
.content-area2 {
  margin-right: -10px;
}
.story {
  padding: 5px;
  margin: 0 10px 20px;
  background-color: #eee;
}
.story img {
  width: 100%;
}
.hd {
  grid-area: hd;
}
.st1 {
  grid-area: st1;
}
.st2 {
  grid-area: st2;
}

@media (min-width: 37.5em) {
  .content-area1,
  .content-area2 {
    display: grid;
  }
  .content-area1 {
    grid-template-areas:
      "hd hd"
      "st1 st1";
  }
  .content-area2 {
    grid-template-areas:
      "hd hd hd"
      "st2 . st1"
      "st2 . st1";
  }
}
@media (min-width: 55em) {
  .content-area1 {
    grid-template-columns: 20% repeat(4, 1fr);
    grid-template-areas:
      "hd st1 st1 . ."
      "hd . . . .";
  }
  .content-area2 {
    grid-template-columns: 20% repeat(3, 1fr);
    grid-template-areas:
      "hd st1 . st2"
      "hd st1 . st2";
  }
}

以上是关于精通 CSS 第 8 章 响应式布局 学习案例的主要内容，如果未能解决你的问题，请参考以下文章

精通 CSS 第 7 章学习笔记（上）

第33章 项目实战-兼容式响应布局1

精通高级RxJava 2响应式编程思想

精通 CSS 第 9 章 表单与数据表 学习笔记

Ext JS 6学习文档-第8章-主题和响应式设计

精通 CSS 第 10 章 变换过渡与动画 学习笔记