你的第一个多画面结构网站

响应式设计

互联网是大多数设备都可以访问的,不管是手机还是大型屏幕。每一个设备都有自身的优点以及限制。而作为一个网络开发者,支持所有设备是职责之一。

我们正在建立一个跨设备并且跨屏幕的网站。在上一课当中, 我们建立了各个页面的内容框架以及基本的结构。在这个教程当中,我们会把我们的框架与内容结合到一起来建立一个漂亮的页面,这个页面会在绝大多数的设备上都会是响应式的。

遵循移动网络开发的原则, 我们从一个很窄的viewport — 跟手机很相似 — 我们先从手机开始。 然后再一步一步的扩展到更大的设备。 我们可以逐步扩大viewport同时决定设计和布局是否合适来实现。

刚刚我们为我们的内容制作了两个高水准的设计。现在我们要让我们的页面去适应不同的布局。 我们通过放置断点—决定结构以及样式—断点的位置取决于内容如何适应窗口大小。

关键要点

  • 始终使用一个视窗。
  • 始终从一个窄的视窗开始,然后扩展。
  • 当你需要调整内容时请基于你的断点。
  • 利用主要断点创建一个高级的布局视图。

添加一个视窗

就算是一个非常基础的页面,你 必须 一直包括一个视窗viewport meta标签。 在建立跨设备体验的过程当中,视窗是最重要的一部分。 没有它,你的站点不会在一个移动设备上正常运转。

视窗决定设备浏览器如何决定窗口是否需要适应网页。有很多设置都可以通过指定视窗来调控页面如何显示。 我们推荐:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
查看完整示例

视窗的配置只会出现在head标签当中,并且只需要声明一次。

应用简单的样式

我们的公司与产品已经有一个非常详细的品牌推广以及字体使用指南,包含在我们的样式指南当中。

样式指南

样式指南是一个非常强大的工具,用来帮助读者对于样式的展现有一个更高层次的理解。并且有助于保持设计的一致性。

色彩

#39b1a4
#ffffff
#f5f5f5
#e9e9e9
#dc4d38

添加样式型图片

在上一个指南当中,我们添加了一些“内容图片”。这些图片的重要性在于介绍产品。 样式型图片不是像“内容图像“那样的核心元素,但是可以为页面添加一些视觉元素, 来引导用户的注意力到选定的内容区域。

其中很好的例子就是用一个标题图片来吸引用户来阅读更多关于产品的内容

Designed site

添加这个元素可以很简单的做到。在我们的案例当中,它将会是header的背景图片,我们会给它应用一些简单的CSS。

#headline {
  padding: 0.8em;
  color: white;
  font-family: Roboto, sans-serif;
  background-image: url(backgroundimage.jpg);
  background-size: cover;
}

我们选择了一个非常简单的背景图片并且应用了一点虚化效果,用来防止用户的注意力被转移。 并且我们将它设置为”cover”,它的作用就是使该元素会在保持原比例上自由拉伸。


设置你的第一个断点

这个设计在600px的时候开始出现显示问题。在我们这个案例中, 每一行文字都有超过10个单词的长度(最佳阅读长度), 这就是我们要更改的地方。

600px似乎是一个很好的出发点,它会给我们一个范围来规划元素的位置。我们可以通过一个技术叫做 设备查询技术(Media Queries)

@media (min-width: 600px) {

}

在一个更大的显示设备上,可以更灵活的来布局内容。

提醒

  • 你不必一次性移除所有的元素,如果需要你可以使用较少的调整。

在我们的产品页面当中,看起来我们需要做:

  • 限制最大宽度。
  • 修改元素的内边距以及缩小字码。
  • 使表格与标题内容浮动对齐。
  • 使视频始终浮动在内容周围。
  • 缩小图片大小并且让他们出现在更好的格局里面。

限制最大宽度。

我们只选择两个主要布局方式:一个窄视窗和一个宽视窗,两者都可以大幅度的将建立过程简单化。

同时我们也决定创建“出血”区域,这个区域无论在窄的或者宽的视窗下都会保持完全“出血”。 这意味着我们应该限制最大宽度,这样文本以及段落就不会在大型屏幕上拉伸至一行。 我们将最大值定在800px左右。

为了实现它,我们需要限制它的宽度并且将其置中。 我们需要在每个部分外层都创建一个容器,并且应用”margin:auto”。 这会允许在屏幕改变大小的情况下(最大800px)内容区域保持置中。

这个容器会包含一个简单的 div 在下面的表格当中:

<div class="container">...</div>
    <div id="section1">
      <div class="container">
        <h2>What will I learn?</h2>
    
查看完整示例
    .container {
      margin: auto;
      max-width: 800px;
    }
    
查看完整示例

修改元素的内边距(padding)值以及缩小字码。

在窄视窗上,我们没有很多的空间去放置内容,所以字体的大小以及粗细都会被大幅度缩小来适应屏幕。

在一个大的视窗上,我们需要考虑用户在大多数情况下都是离屏幕有一段距离的。 为了提高内容的可读性,我们可以加大或者加粗字体,或者更改内边距padding值来让选定的区域更突出。

在我们的产品页面,我们会增加区域元素之间的内边距padding值到5%。同时我们会放大每个区域的抬头。

    #headline {
      padding: 20px 5%;
    }
    
查看完整示例

使元素适应宽视窗

我们的窄视窗是一个纵向的堆积显示模式。每一个区域与其中的内容都是从上到下来显示的。

一个宽的视窗给我们很多的空间来摆放内容,保证它摆放在一个最佳位置。在我们的产品页面,根据我们的信息架构(IA, Information Architecture)总结出我们可以:

  • 将表格放置在抬头附近。
  • 将视频放置在重点右边。
  • 平铺图像。
  • 扩大表格。

浮动表单元素

窄视窗意味着,我们在相比之下有很少的横向空间,来让我们随意的在屏幕上摆放元素。

来更有效的运用横向空间,我们需要打破抬头的线性流程,并且将表单与列表放在一起。

    #headline #blurb {
      float: left;
      font-weight: 200;
      width: 50%;
      font-size: 18px;
      box-sizing: border-box;
      padding-right: 10px;
    }

    #headline #register {
      float:right;
      padding: 20px;
      width: 50%;
      box-sizing: border-box;
      font-weight: 300;
    }
    
查看完整示例
    #headline {
      padding: 20px 5%;
    }
    
查看完整示例

浮动视频元素

在窄视窗界面当中,视频的宽度是设定为屏幕的宽度,并且放置在要点列表后面。 在一个宽视窗上面,如果视频放置在要点列表后,会导致视频过度放大并且出现显示问题。

视频元素需要从窄视窗的纵向流程中移除,应该放置与内容列表对齐。

    #section1 ul {
      box-sizing: border-box;
      float: left;
      width: 50%;
      padding-right: 1em;
    }
    
    #section1 video {
      width: 50%;
      float: right;
    }
    
查看完整示例

平铺图片

在窄视窗当中(大部分为移动设备),其界面是设定为屏幕的满宽度并且纵向叠加, 这样并不会在宽视窗中正常适应。

为了让图片在宽视窗中显示正常,他们会被缩小至容器宽度的30%并且横向排列(与纵向叠加对立)。 我们会添加一些圆角(border radius)与阴影(box-shadow)来让图片看着更漂亮一些。

    #section2 div img {
       width: 30%;
       margin: 1%;
       box-sizing: border-box;
       border-radius: 50% 50%;
       box-shadow: black 0px 0px 5px;
     }
    
查看完整示例

使图片与DPI相应

当使用图片的时候, 要将视窗的大小以及设备的清晰度加入考虑当中。

互联网是为了96dpi的屏幕所设计的。随着移动设备的面世,我们见证了屏幕清晰度的巨大提升,更不用提笔记本电脑的视网膜显示。 正因如此,96dpi的图片在高像素的设备上通常都看着很糟糕。

我们有一个还未完全推广的解决方案。 对于支持这个功能的浏览器,你可以在高清屏幕上显示高清图片。

<img src="photo.png" srcset="photo@2x.png 2x">

表格

在窄视窗的移动设备上正确显示表格并不是一件很容易的事情,要实现这个目标需要考虑特殊的需求。

在窄视窗上,我们推荐将表格分为两行,排列标题与表格单元来形成柱形图。

在我们的站点上, 我们需要为表格单独建立一个断点。 当你在为一个移动设备建造站点的时候,很难去剔除已经应用的样式, 所以我们必须把窄视窗的表格样式(CSS)文件与宽视窗区分开来。 才能有一个清晰并且统一的断点。

    @media screen and (max-width: 600px) {
      table thead {
        display: none;
      }

      table td {
        display: block;
        position: relative;
        padding-left: 50%;
        padding-top: 13px;
        padding-bottom: 13px;
        text-align: left;
        background: #e9e9e9;
      }

      table td:before {
        content: attr(data-th) " :";
        display: inline-block;
        color: #000000;
        background: #e9e9e9;
        border-right: 2px solid transparent;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 33%;
        max-height: 100%;

        font-size: 16px;
        font-weight: 300;
        padding-left: 13px;
        padding-top: 13px;
      }
    }
    
查看完整示例

结尾

恭喜。 当你读到这里的时候,你已经建立了你的第一个单页产品页面,这个页面会在绝大多数的移动设备上正常显示,包括适应外型以及不同的屏幕大小。

如果你有遵循这些指南,你应该已经有了一个很好的开始:

  1. 创建了一个基础的信息架构(IA, Information Architecture)并且在写代码之前已经对内容有一定的理解。
  2. 总是设置一个视窗(viewport)。
  3. 在移动设备优先的前提上打造你的基础体验。
  4. 在完成了移动设备体验之后,慢慢放大视窗(viewport)直到结构出现问题,并且设定新的断点。
  5. 重复上述步骤。

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

回到顶部