The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

响应用户界面

Translated By:

创建灵活设计,而不是固定的设计,布局。并且能够在任何尺寸的屏幕正常运行。

响应式网站设计基础

在这门课程里,你将与 Google 的 Pete LePage 一起学习响应式设计的基础知识!你将创建自己的响应式网页, 并且可以在任何设备上正常显示,无论是手机、平板电脑还是桌面设备或任何其他设备。

首先,你将学习响应式网站需要具备什么条件,以及一些适用于各种设备的常见响应式设计模式。 然后,你将学习如何使用视口标记和 CSS 媒体查询创建自己的响应式布局。在此期间, 你将学习添加大型和小型断点,并优化文本以便于阅读。

这个免费的课程可以在 Udacity 找到

参加课程

设置视口

对于针对各种设备优化过的网页,其文档标头中必须包含元视口元素。元视口代码会指示浏览器如何对网页尺寸和缩放比例进行控制。

TL;DR

  • 使用元视口代码控制浏览器视口的宽度和缩放比例。
  • 添加 width=device-width 以便与屏幕宽度(以设备无关像素为单位)进行匹配。
  • 添加 initial-scale=1 以便将 CSS 像素与设备无关像素的比例设为 1:1。
  • 确保在不停用用户缩放功能的情况下,您的网页也可以访问。

为了提供最佳体验,移动浏览器会以桌面设备的屏幕宽度(通常大约为 980 像素,但不同设备可能会有所不同)来呈现网页,然后再增加字体大小并将内容调整为适合屏幕的大小,从而改善内容的呈现效果。对用户来说,这就意味着,字体大小可能会不一致,他们必须点按两次或张合手指进行缩放,才能查看内容并与之互动。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

使用元视口值 width=device-width 指示网页与屏幕宽度(以设备无关像素为单位)进行匹配。这样一来,网页便可以重排内容,使之适合不同的屏幕大小(从较小的手机到较大的桌面设备显示器,不一而足)。

有些浏览器会在旋转到横向模式时保持固定的网页宽度,然后通过缩放(而不是重排)填满屏幕。添加属性 initial-scale=1 会指示浏览器在不考虑设备方向的情况下,指示浏览器将 CSS 像素与设备无关像素的比例设为 1:1,并允许网页完全占用横向宽度。

确保视口可以访问

除了设置 initial-scale 外,您还可以在视口上设置以下属性:

  • minimum-scale
  • maximum-scale
  • user-scalable

但是,设置后,这些属性可以停用用户缩放视口的功能,可能会造成网页访问方面的问题。

调整内容大小,使其适合视口

无论在桌面设备上还是在移动设备上,用户都习惯上下滚动网站,而不是横向滚动,因此,如果用户必须横向滚动或缩小页面才能查看整个网页,那么这将给用户带来糟糕的体验。

TL;DR

  • 请勿使用较大的固定宽度元素。
  • 在任何视口宽度下,内容均应正常显示。
  • 使用 CSS 媒体查询为不同尺寸的屏幕应用不同样式。

使用 meta viewport 代码开发移动版网站时,开发者很容易在无意间创建出不太适合指定视口的网页内容。例如,如果图片宽度大于视口宽度,那么就会导致视口横向滚动。您应该调整此内容,使其适合视口内的宽度,以便用户无需横向滚动。

由于不同设备(例如手机和平板电脑,甚至不同手机之间)的屏幕尺寸和宽度(以 CSS 像素为单位)差别很大,因此内容不应只在特定视口下正常显示。

为网页元素设置较大的 CSS 绝对宽度(如下例所示)会导致 div 因过宽而不适合窄视口设备(例如,iPhone 等宽度为 320 CSS 像素的设备)。因此,请改为使用相对宽度值,例如 width: 100%。同样请注意,使用较大的绝对定位值可能会使元素脱离小屏幕上的视口。

将 CSS 媒体查询用于自适应设计

媒体查询是可应用于 CSS 样式的简单过滤器。有了这些过滤器,我们可以根据设备呈现内容的特点轻松更改样式,包括显示屏类型、宽度、高度、方向甚至是分辨率。

TL;DR

  • 媒体查询可用于根据设备特点应用样式。
  • 优先使用 min-width(而非 min-device-width),以确保实现最宽阔的视觉体验。
  • 为元素使用相对尺寸,以免破坏版式完整性。

例如,您可以将打印必需的所有样式放在打印媒体查询中:

<link rel="stylesheet" href="print.css" media="print">

除了在样式表链接中使用 media 属性之外,我们还可以通过另外两种方法应用可以嵌入 CSS 文件的媒体查询:@media 和 @import。出于性能方面的考虑,我们建议开发者优先考虑使用前两种方法,尽量避免使用 @import 语法(请参阅避免 CSS 导入)。

@media print {
  /* print style sheets go here */
}

@import url(print.css) print;

不同媒体查询适用的逻辑并不是互斥的,因此,开发者可以根据 CSS 中优先级的标准规则,应用满足生成的 CSS 区块标准的任何过滤器。

根据视口大小应用媒体查询

通过媒体查询,我们可以打造自适应体验,使特定样式可应用于小屏幕、大屏幕和介于两者之间的屏幕。通过媒体查询语法,我们可以创建可根据设备特点应用的规则。

@media (query) {
  /* CSS Rules used when query matches */
}

尽管我们可以查询多个不同的项目,但自适应网页设计最常使用的项目为:min-width、max-width、min-height 和 max-height。

属性 结果
min-width 当任意浏览器宽度大于查询中定义的值时适用的规则。
max-width 当任意浏览器宽度小于查询中定义的值时适用的规则。
min-height 当任意浏览器高度大于查询中定义的值时适用的规则。
max-height 当任意浏览器高度小于查询中定义的值时适用的规则。
orientation=portrait 高度大于或等于宽度的任意浏览器适用的规则。
orientation=landscape 宽度大于高度的任意浏览器适用的规则。

我们通过一个示例了解一下:

预览使用媒体查询的网页,以便在调整尺寸时更改属性。
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
  @media (min-width: 500px) and (max-width: 600px) {
    h1 {
      color: fuchsia;
    }

    .desc:after {
      content:" In fact, it's between 500px and 600px wide.";
    }
  }
</style>
  • 当浏览器宽度介于 0 像素640 像素之间时,系统将会应用 max-640px.css。
  • 当浏览器宽度介于 500 像素600 像素之间时,系统将会应用 @media。
  • 当浏览器宽度为 640 像素或大于此值时,系统将会应用 min-640px.css。
  • 当浏览器宽度大于高度时,系统将会应用 landscape.css。
  • 当浏览器高度大于宽度时,系统将会应用 portrait.css。

min-device-width 注意事项

尽管开发者也可以根据 *-device-width 创建查询,但是我们强烈建议不要这么做

这两种代码的差别虽然不明显但却十分重要:min-width 以浏览器窗口尺寸为依据,而 min-device-width 却是以屏幕尺寸为依据。很遗憾,有些浏览器(包括旧版 Android 浏览器)可能无法正确报告设备宽度,反而会以预期的视口宽度报告屏幕尺寸(以设备像素为单位)。

此外,使用 *-device-width 会阻止内容适应允许窗口调整大小的桌面设备或其他设备,因为该查询基于设备的实际大小,而非浏览器窗口大小。

使用相对单位

与固定宽度的版式相比,自适应设计的主要概念基础是流畅性和比例可调节性。使用相对衡量单位有助于简化版式,并防止无意间创建对视口来说过大的组件。

例如,在顶级 div 上设置 width: 100% 可以确保其横跨视口的宽度,对视口来说既不会太大也不会太小。无论设备是宽度为 320 像素的 iPhone、宽度为 342 像素的 Blackberry Z10,还是宽度为 360 像素的 Nexus 5,div 均会适合这些屏幕。

此外,使用相对单位可让浏览器根据用户缩放程度呈现内容,而无需为网页添加横向滚动条。

Not recommended — fixed width

div.fullWidth {
  width: 320px;
  margin-left: auto;
  margin-right: auto;
}

Recommended — responsive width

div.fullWidth {
  width: 100%;
}

如何选择断点

尽管根据设备类定义断点的方法可能很有用,但请慎用这种方法。如果根据具体设备、产品、品牌名称或现今正在使用的操作系统定义断点,后期维护起来可能会困难重重。相反,内容本身应该确定版式调整方式,使其适合自己的容器。

TL;DR

  • 根据内容创建断点,绝对不要根据具体设备、产品或品牌来创建。
  • 从针对最小的移动设备进行设计入手,然后随着屏幕类型不断增加而逐渐改善体验。
  • 使每行的文字最多为 70 或 80 个字符左右。

以从小屏幕开始、不断扩展的方式选择主要断点

先针对小屏幕尺寸进行内容设计,然后扩展至不同尺寸的屏幕,直到必须添加断点为止。如此一来,您便可以根据内容优化断点,并使断点数量降至最低。

我们来分析一下在开头部分看到的示例天气预报。 首先使天气预报在较小的屏幕上呈现效果良好。

在较小的屏幕上预览天气预报的显示效果。

接下来,调整浏览器大小,直到元素之间的空间过大,天气预报根本无法正常显示为止。具体应调整到多大是由自己主观决定的,但超过 600 像素肯定就过宽了。

在网页逐渐变宽时预览天气预报的显示效果。

要在 600 像素处插入断点,请新建两个样式表,一个在浏览器不超过 600 像素时使用,另一个在超过 600 像素时使用。

<link rel="stylesheet" href="weather.css">
<link rel="stylesheet" media="(max-width:600px)" href="weather-2-small.css">
<link rel="stylesheet" media="(min-width:601px)" href="weather-2-large.css">

最后,重新设计 CSS。在本例中,我们已将常用的样式(例如字体、图标、基本定位和颜色)放入 weather.css。然后,针对小屏幕的特定版式会放入 weather-small.css,而大屏幕样式则放入 weather-large.css。

Preview of the weather forecast designed for a wider screen.

必要时选择小断点

除了选择主要断点使版式发生重大变化外,做出适当调整产生微小变化的做法也很有用。例如,进行以下调整可能会很有用:在主要断点之间调整某个元素的边距或内边距,或增加字体大小使其在版式中看起来更自然。

首先优化小屏幕版式。在本例中,当视口宽度超过 360 像素时,我们来增加字体大小。接下来,当有足够的空间时,我们可以将高温和低温分隔开,使其在同一行中显示,而不是以上下排列的形式显示。然后,我们来调大天气图标。

@media (min-width: 360px) {
  body {
    font-size: 1.0em;
  }
}

@media (min-width: 500px) {
  .seven-day-fc .temp-low,
  .seven-day-fc .temp-high {
    display: inline-block;
    width: 45%;
  }

  .seven-day-fc .seven-day-temp {
    margin-left: 5%;
  }

  .seven-day-fc .icon {
    width: 64px;
    height: 64px;
  }
}
Before adding minor breakpoints.
Before adding minor breakpoints.
After adding minor breakpoints.
After adding minor breakpoints.

同样,如果是大屏幕,我们最好限制天气预报面板的宽度,使其不会占用整个屏幕宽度。

@media (min-width: 700px) {
  .weather-forecast {
    width: 700px;
  }
}

优化文本,提高可读性

传统的可读性理论建议:理想栏目的每一行应该包含 70 到 80 个字符(大约 8 到 10 个英文单词),因此,每次文本块宽度超过 10 个单词时,就应考虑添加断点。

添加小断点之前。
Before adding minor breakpoints.
添加小断点之后。
After adding minor breakpoints.

我们来深入分析一下上述博文示例。在较小的屏幕上,大小为 1em 的 Roboto 字体可以使每行完美地呈现 10 个单词,而在较大的屏幕上就需要添加断点了。在本例中,如果浏览器宽度超过了 575 像素,那么内容的理想宽度是 550 像素。

@media (min-width: 575px) {
  article {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
}

绝不能完全隐藏内容

在根据屏幕大小选择要隐藏或显示的内容时请务必谨慎。 不要只是因为内容无法适合屏幕而将其隐藏。屏幕大小并非确定用户需求的决定性因素。例如,如果去除天气预报中的花粉统计数据,那么对春天容易过敏的用户来说就是非常严重的问题,因为这些用户要根据这类信息决定是否外出。