多设备布局

响应式设计模型

虽然响应式网页设计样式正在快速发展,但能够完全兼容桌面级设备与移动设备的成熟样式却是屈指可数。

大多数的响应式网页设计可以归纳为五种模式:mostly fluid, column drop, layout shifter, tiny tweaks 和 off canvas。一些情况下,页面可能会采用组合设计模式,例如同时采用 column drop 与 off canvas。 这些样式最初都是由 Luke Wroblewski 定义的,他们为设计响应式式页面提供了一个坚实的基础。

设计模型

为了创建简洁易懂的示例,下面提到的每一个案例都是基于flexbox通过真实的标签创建的, 主要是在一个主 div内包含三个内容 div。 每个示例都由定义最小视图开始,并在必要的时候加入响应节点(breakpoint)。 flexbox 布局模式 能很好的支持现在的主流浏览,尽管为了最佳效果你可能需要依赖特定的前缀。

大体流动性模型(Mostly Fluid)

Mostly fluid 样式主要由流体式栅格(fluid grid)构成。 无论是在大尺寸或者中等大小屏幕,它都能保持尺寸不变而仅仅只是调整边距以适应更宽的屏幕。在小屏幕上,流体式栅格布局会将主要内容重新排版,使栏目垂直堆栈排列。使用流体式栅格的一个最主要优点是通常只需要在大屏幕与小屏幕之间设置一个响应点即可。

试一下

在最小视图的情况下,每个内容 div 垂直堆栈排列。一旦屏幕的宽度达到600px时,主容器 div 保持 width: 100%,其余的次要 div如下图所示并排排列在主 div下方。如果屏幕宽度超过了800px,主容器 div 的宽度将固定并在屏幕上居中。

使用这种设计样式的网站有:

    .container {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;
    }

    .c1, .c2, .c3 {
      width: 100%;
    }

    @media (min-width: 600px) {
      .c2, .c3 {
        width: 50%;
      }
    }

    @media (min-width: 800px) {
      .container {
        width: 800px;
        margin-left: auto;
        margin-right: auto;
      }
    }
    
查看完整示例

掉落列模型

对于全屏多栏目布局来说,column drop能够简单地在屏幕宽度变窄以致于容不下太多内容时自动纵向排列栏目,最终使每一个栏目都垂直堆栈排列。在这种布局样式下,响应点可以根据页面内容使用各种设计。

试一下

与 mostly fluid 的示例一样, 在最小视图中纵向垂直排列内容,但在屏幕宽度超过600px后,主要与次要内容 div占据了屏幕的全部宽度。 Div的顺序被设定为根据CSS中的order属性进行排列。 屏幕宽度为800px时,三个内容 div全部一起出现并占据了全部屏幕宽度。

使用这种设计样式的网站有:

    .container {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;
    }

    .c1, .c2, .c3 {
      width: 100%;
    }

    @media (min-width: 600px) {
      .c1 {
        width: 60%;
        -webkit-order: 2;
        order: 2;
      }

      .c2 {
        width: 40%;
        -webkit-order: 1;
        order: 1;
      }

      .c3 {
        width: 100%;
        -webkit-order: 3;
        order: 3;
      }
    }


    @media (min-width: 800px) {
      .c2 {
        width: 20%;
      }

      .c3 {
        width: 20%;
      }
    }
    
查看完整示例

活动布局模型

Layout shifter布局是响应能力最强的布局样式,它通过多个响应点来适应多种屏幕宽度。这种布局的关键在于,并不是重新排列内容或者垂直排列列而是将其四处移动。由于每个响应点对应的布局相互之间有巨大的差异,所以保持内容一致的操作更加复杂并可能涉及改动元素内部内容而不是仅仅改变全局布局。

试一下

这个简化了的示例展示了layout shifter的设计样式,在较小屏幕中的内容纵向垂直排列,但在较大的屏幕中,布局发生了很大的变化:左边是一个div而右边由两个垂直排列的div构成。

使用这种设计样式的网站有:

    .container {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;
    }

    .c1, .c2, .c3, .c4 {
      width: 100%;
    }

    @media (min-width: 600px) {
      .c1 {
        width: 25%;
      }

      .c4 {
        width: 75%;
      }

    }

    @media (min-width: 800px) {
      .container {
        width: 800px;
        margin-left: auto;
        margin-right: auto;
      }
    }
    
查看完整示例

微调模型

Tiny tweaks会对布局做出细微的改动,如调整字体大小,缩放图片尺寸或者微调内容位置等等。这种布局样式对于单列排版来说十分合适,比如一些单页面的长网站和含有大量文字内容的页面。

试一下

顾名思义,这个示例的变化随着屏幕大小的变化而改变。当屏幕宽度越大,字体大小和内边距值也会随之变大。

使用这种设计样式的网站有:

    .c1 {
      padding: 10px;
      width: 100%;
    }

    @media (min-width: 500px) {
      .c1 {
        padding: 20px;
        font-size: 1.5em;
      }
    }

    @media (min-width: 800px) {
      .c1 {
        padding: 40px;
        font-size: 2em;
      }
    }
    
查看完整示例

画布溢出布局

不采用垂直堆叠内容的方式,画布溢出模式减少经常使用的内容,或许使导航或应用菜单超出屏幕,只 当屏幕上显示的大小足够时才显示它们,并在较小的屏幕将内容变成一个点击。

试一下

不采用垂直堆叠内容的方式,这个示例使用一种transform: translate(-250px, 0)的变换隐藏了超出内容的两个div。JavaScript通过对元素添加一个开放的类来显示div。屏幕更宽,溢出屏幕定位则移除元素并使得 他们在可见的视图显示。

使用该示例时注意, iOS 6的Safari浏览器以及安卓浏览器不支持flexboxflex-flow: row nowrap特性,所以我们必须回到绝对定位的方式。

使用这种设计样式的网站有:

    body {
      overflow-x: hidden;
    }
    
    .container {
      display: block;
    }

    .c1, .c3 {
      position: absolute;
      width: 250px;
      height: 100%;
    
      /*
        This is a trick to improve performance on newer versions of Chrome
        #perfmatters
      */
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;

      -webkit-transition: -webkit-transform 0.4s ease-out;
      transition: transform 0.4s ease-out;
    
      z-index: 1;
    }

    .c1 {
      /*
      Using translate3d as a trick to improve performance on older versions of Chrome
      See: http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
      #perfmatters
      */
      -webkit-transform: translate(-250px,0);
      transform: translate(-250px,0);
    }

    .c2 {
      width: 100%;
      position: absolute;
    }
    
    .c3 {
      left: 100%;
    }

    .c1.open {
      -webkit-transform: translate(0,0);
      transform: translate(0,0);
    }

    .c3.open {
      -webkit-transform: translate(-250px,0);
      transform: translate(-250px,0);
    }
    
    @media (min-width: 500px) {
      /* If the screen is wider then 500px, use Flexbox */
      .container {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row nowrap;
        flex-flow: row nowrap;
      }
      .c1 {
        position: relative;
        -webkit-transition: none 0s ease-out;
        transition: none 0s ease-out;
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
      }
      .c2 {
        position: static;
      }
    }

    @media (min-width: 800px) {
      body {
        overflow-x: auto;
      }
      .c3 {
        position: relative;
        left: auto;
        -webkit-transition: none 0s ease-out;
        transition: none 0s ease-out;
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
      }
    }
    
查看完整示例

除非另有说明,本网页的内容采用知识共享署名3.0许可和代码示例都基于Apache2.0许可。如需详细资讯,请参阅我们的网站政策

回到顶部