微调式（Tiny Tweaks）

Tiny Tweaks布局模式主要表现为单一列展示大部分内容，随着视口宽的的增加，改变font-size值和padding间距，以保证内容的持续可读性。

image.png

.c1 {
  padding: 10px;
  width: 100%;
}
@media (min-width: 600px) {
  .c1 {
    padding: 20px;
    font-size: 1.5rem;
  }
}
@media (min-width: 960px) {
  .c1 {
    padding: 40px;
    font-size: 2rem;
  }
}

浮动式（Mostly Fluid）

Mostly Fluid布局是一种多列布局，在大屏幕上设置较大margin，但是在移动端则会浮动后续列，垂直堆叠排列。该模式很常见，因为通常只需要设置一个断点。

image.png

@media screen and (min-width: 37.5em) {
  .c2, .c3 {
    float: left;
    width: 50%;
  }
}

断列式（Column Drop）

• Column Drop也是一种多列布局方式，在移动端垂直堆叠排列，随着屏幕增大将各列平铺排列，这种模式就需要我们选择多个断点并选择变化列。

  
  image.png

  @media screen and (min-width: 42em) {
    .main {
      width: 75%;
      float: left;
      padding: 0 0 1em 0;
    }
    .sb {
      float: left;
      width: 25%;
    }
    .sb-2 {
      clear: both;
    }
  }
  @media screen and (min-width: 62em) {
    .main {
      width: 50%;
    }
    .sb-2 {
      float: right;
      width: 25%;
      clear: none;
    }
  }

移位式（Layout Shifter）

• Layout Shifter响应式设计是指针对不同屏幕进行不同布局和内容展示，通常需要设置多个断点，然后针对不同大小屏幕，进行不同设计，和前面几种模式在处理小屏幕时自动将后面列往下堆叠不同，在每类断点之间都需要涉及布局和内容两者的修改；这意味着我们需要做更多的编码工作，当然我们的可控性也更强。

  
  image.png

分屏式（Off Canvas）

• 在这之前的四种设计思路都是在大屏铺开展示，然后随着屏幕缩小，将其余列垂直堆叠展示，用户需要上下滚动才能查看页面所有内容，而Off Canvas模式则换了一个思路：分屏：

• 在小屏幕设备，将不常用或非主要的内容（如导航和菜单之类）放在屏幕外左右两侧，点击可以切换显示／隐藏；
  在大屏幕可选择性的铺开展示；

  
  image.png
  

  通常的做法是，在小屏幕，设置不常用内容display: none;或transform: translate(-200px, 0);，然后点击打开按钮时，添加恢复样式display: block;或transform: translate(0, 0);，即可展示；在大屏幕则可选择性设计展示方式，通常是直接平铺。