自适应设计基础知识

如何创建符合用户浏览设备的需求和功能的网站。

使用移动设备上网的人数持续飞速增长,这些设备通常会受到显示屏大小限制,因此需要采用不同的方法来控制内容在屏幕上的呈现方式。

响应式网页设计最初是由 Ethan Marcotte 在 A List Apart 中定义的,旨在满足用户及其所用设备的需求。布局会根据设备的尺寸和功能而变化。例如,手机可能会以单列视图显示内容,而在平板电脑上,相同内容则会以两列显示。

在本视频中,设计从窄视口改为宽视口,以适应可用的屏幕空间。

手机、“平板手机”、平板电脑、桌面设备、游戏机、电视甚至穿戴式设备的屏幕尺寸各异。屏幕尺寸层出不穷,因此您的网站应能够适应当今或未来的所有屏幕尺寸,这一点至关重要。此外,设备具有不同的交互功能。例如,您的部分访问者将使用触摸屏。现代自适应设计会考虑所有这些因素,以优化所有用户的体验。

设置视口

针对各种设备进行了优化的网页必须在文档标头中加入元视口标记。 元视口标记可指示浏览器如何控制网页的尺寸和缩放比例。

为了尝试提供最佳体验,移动浏览器会以桌面设备屏幕宽度(通常约为 980px,但设备不同而变化)呈现网页,然后尝试通过增加字体大小并缩放内容来适应屏幕大小,以使内容看起来更美观。对用户而言,字体大小可能会不一致,他们可能需要点按两次或双指张合进行缩放,才能查看内容并与之互动。

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <meta name="viewport" content="width=device-width, initial-scale=1">
    …
  </head>
  …

使用元视口值 width=device-width 可指示网页与屏幕宽度(以设备无关像素为单位)进行匹配。设备(或密度)无关像素是单个像素的表示法,在高密度屏幕上可能由许多物理像素组成。这样一来,网页便可重排内容以匹配不同的屏幕尺寸,无论是在小型手机还是大型桌面设备显示器上呈现。

包含文字难以辨认的网页的屏幕截图,文字被缩小得非常难以辨认。
在没有视口元标记的情况下,网页如何在设备中加载的示例。请参阅 Glitch 上的此示例
同一网页的屏幕截图,其中文字大小可辨。
使用视口元标记的设备如何加载网页的示例。请参阅 Glitch 上的此示例

某些浏览器会在旋转到横屏模式时保持固定的网页宽度,然后通过缩放(而不是自动重排)填满屏幕。添加值 initial-scale=1 可指示浏览器在 CSS 像素与设备无关像素之间建立 1:1 的关系(无论设备屏幕方向如何),并允许网页充分利用整个横向宽度。

没有包含 widthinitial-scale<meta name="viewport"> 标记 Lighthouse 审核可帮助您自动执行流程,确保您的 HTML 文档正确使用视口元标记。

确保视口可以访问

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

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

设置后,这些控件可能会停用用户缩放视口的功能,而这可能会导致无障碍功能问题。 因此,我们不建议您使用这些属性。

根据视口调整内容大小

在桌面设备和移动设备上,用户习惯垂直滚动网站,而非水平滚动;强制用户水平滚动或缩小以查看整个网页会导致糟糕的用户体验。

在开发包含元视口标记的移动网站时,很容易意外创建不太适合指定视口的网页内容。例如,如果图片在宽度大于视口宽度时显示,可能会导致视口水平滚动。您应调整此内容,使其适应视口的宽度,以便用户无需水平滚动。

内容大小不符合视口大小 Lighthouse 审核可帮助您自动执行溢出内容检测流程。

图片

图片具有固定的尺寸,如果图片大于视口,则会导致滚动条。解决此问题的一种常用方法是为所有图片提供 100%max-width。如果视口尺寸小于图像,这将导致图像缩小以适应其拥有的空间。 不过,由于 max-width 而不是 width100%,因此图片的拉伸大小将不会超过其自然尺寸。通常,您可以放心地将以下内容添加到您的样式表中,这样图片就不会出现导致滚动条的问题。

img {
  max-width: 100%;
  display: block;
}

为 img 元素添加图片尺寸

使用 max-width: 100% 时,您将替换图片的自然尺寸,但您仍应在 <img> 标记中使用 widthheight 属性。这是因为现代浏览器会使用这些信息在图片加载之前为图片预留空间,这有助于避免内容加载时出现布局偏移

布局

由于不同设备(例如手机和平板电脑之间,甚至不同手机之间)的屏幕尺寸和宽度(以 CSS 像素为单位)差异很大,因此内容不应仅依赖于特定的视口宽度才能正常呈现。

过去,必须使用百分比设置元素来创建布局。在以下示例中,您可以看到包含浮动元素的双列布局,这些元素的大小使用像素。当视口小于列的总宽度时,我们必须水平滚动屏幕才能看到内容。

两列布局的屏幕截图,第二列的大部分内容不在视口范围内
使用像素的浮动布局。请参阅 Glitch 上的此示例

通过对宽度使用百分比值,列始终占容器的百分比。 这意味着列会变窄,而不是形成滚动条。

借助 Flexbox、网格布局和 Multicol 等现代 CSS 布局技术,您可以更轻松地创建灵活网格。

Flexbox

如果您有一组大小不同的项,并且您希望这些项舒适地放入一行或几行中,并且较小的项占用的空间更少,而较大的项获得更多的空间,则此布局方法非常合适。

.items {
  display: flex;
  justify-content: space-between;
}

在自适应设计中,您可以使用 Flexbox 将各项显示为单行,或者随着可用空间减少而换行显示多行。

详细了解 Flexbox

CSS 网格布局

通过 CSS 网格布局,可以轻松创建灵活的网格。如果我们考虑之前的浮动示例,而不是使用百分比创建列,则可以使用网格布局和 fr 单位(表示容器中一部分可用空间)。

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

网格还可用于创建常规网格布局,以便容纳尽可能多的项。 随着屏幕尺寸缩小,可用音轨数量也会随之减少。 在下面的演示中,我们在每行中放置了任意数量的卡片,最小大小为 200px

详细了解 CSS 网格布局

多列布局

对于某些类型的布局,您可以使用多列布局 (Multicol),它可以通过 column-width 属性创建自适应列数。在下面的演示中,您可以看到,如果还有空间可容纳另一个 200px 列,则添加的列。

详细了解多列

使用 CSS 媒体查询提高响应速度

有时,您需要对布局进行更广泛的更改,以支持特定的屏幕尺寸,从而超出上述技术所允许的做法。这正是媒体查询的用武之地。

媒体查询是可应用于 CSS 样式的简单过滤条件。借助这些控件,您可以根据呈现内容的设备类型或相应设备的功能(例如宽度、高度、屏幕方向、悬停能力以及设备是否用作触摸屏)轻松更改样式。

如需提供不同的打印样式,您需要定位输出类型,以便添加具有打印样式的样式表,如下所示:

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="stylesheet" href="print.css" media="print">
    …
  </head>
  …

或者,您也可以使用媒体查询在主样式表中添加打印样式:

@media print {
  /* print styles go here */
}

对于自适应设计,我们通常会查询设备的功能,以便为较小的屏幕提供不同的布局,或者在检测到访问者使用的是触摸屏时。

基于视口大小的媒体查询

借助媒体查询,我们能够打造响应式体验,让特定样式可应用于小屏幕、大屏幕以及介于两者之间的屏幕。因此,我们在这里检测到的功能是屏幕尺寸,我们可以测试以下内容。

  • widthmin-widthmax-width
  • heightmin-heightmax-height
  • orientation
  • aspect-ratio

所有这些功能都有出色的浏览器支持。如需了解更多详情,包括浏览器支持信息,请参阅 MDN 上的宽度高度方向宽高比

基于设备功能的媒体查询

鉴于可用设备的种类,我们不能假设每个大设备都是普通的台式机或笔记本电脑,或者人们只在小型设备上使用触摸屏。通过在媒体查询规范中添加一些较新的内容,我们可以测试各种功能,例如用于与设备交互的指针类型以及用户是否可以将鼠标悬停在元素上。

  • hover
  • pointer
  • any-hover
  • any-pointer

请尝试在不同设备(例如普通桌面设备和手机或平板电脑)上查看此演示。

这些新功能在所有现代浏览器中都得到了很好的支持。如需了解详情,请参阅关于hover任意悬停指针任意指针的 MDN 页面。

使用 any-hoverany-pointer

any-hoverany-pointer 功能可测试用户是否能够悬停或使用该类型的指针(即使它不是他们与设备互动的主要方式)。因此使用这些函数时请格外小心。 强制用户在使用触摸屏时切换到鼠标不太友好! 不过,如果有必要确定用户拥有何种设备,则 any-hoverany-pointer 可能会很有用。例如,除了具有悬停功能之外,配备触摸屏和触控板的笔记本电脑还应匹配粗指针和精确指针。

如何选择断点

请勿根据设备类定义断点。如果根据目前使用的特定设备、产品、品牌名称或操作系统定义断点,维护起来可能很麻烦。相反,内容本身应该确定布局如何调整以适应其容器。

挑选主要断点,具体做法是从小屏幕开始,然后不断优化

先将内容设计为适合小屏幕尺寸,然后展开屏幕,直到需要断点为止。这样,您就可以根据内容优化断点,并尽可能减少断点数量。

我们来分析一下在开头部分看到的示例:天气预报。 第一步是让预测结果在小屏幕上呈现良好效果。

一款天气应用在移动设备上的显示效果的屏幕截图
应用在较窄宽度下。

接下来,调整浏览器大小,直到元素之间的空间过大,天气预报根本无法正常显示为止。该决定有点主观,但高于 600px 的范围肯定太过宽泛。

一个天气应用的屏幕截图,应用项之间存在大的间隔
应用处于我们认为应该调整设计的时间点。

如需在 600px 处插入断点,请在 CSS 末尾为该组件创建两个媒体查询,一个在浏览器处于 600px 及更低级别时使用,另一个在浏览器宽度大于 600px 时使用。

@media (max-width: 600px) {

}

@media (min-width: 601px) {

}

最后,重构 CSS。在 600pxmax-width 的媒体查询内,添加仅适用于小屏幕的 CSS。在 601pxmin-width 的媒体查询内,为大屏幕添加 CSS。

在必要时选择次要断点

除了在布局发生显著变化时选择主要断点之外,针对细微变化进行调整也很有帮助。例如,在主要断点之间调整某个元素的外边距或内边距,或者增加字体大小使其在布局中看起来更自然,可能会有所帮助。

首先,优化小屏幕布局。在本例中,我们要在视口宽度大于 360px 时增强字体。其次,当有足够的空间时,我们可以将高温和低温分隔开,使其在同一行中显示,而不是上下排列。 我们还要将天气图标调大一点。

@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;
  }
}

同样,对于大屏设备,我们最好将预测面板的宽度限制为最大宽度,这样预测面板就不会占用整个屏幕宽度。

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

优化文本,提高可读性

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

移动设备上的一个文本页面的屏幕截图
在移动设备上阅读的文字。
桌面浏览器上文本页面的屏幕截图
在桌面浏览器上阅读的文本,其中添加了用于限制行长度的断点。

我们来深入了解一下上面的博文示例。 在较小的屏幕上,位于 1em 的 Roboto 字体可以使每行完美地呈现 10 个单词,而在较大的屏幕上就需要添加断点了。在这种情况下,如果浏览器宽度大于 575px,则理想的内容宽度为 550px

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

避免单纯地隐藏内容

根据屏幕尺寸选择要隐藏或显示的内容时,请务必谨慎。 不要仅仅因为内容无法适合屏幕而将其隐藏。屏幕尺寸并不能明确表明用户可能需要什么。例如,去除天气预报中的花粉数量,对于在春季容易过敏的用户来说可能是一个严重问题,因为他们需要根据这些信息来判断能否外出。

在 Chrome 开发者工具中查看媒体查询断点

设置好媒体查询断点后,您需要查看使用这些断点时网站的显示效果。您可以调整浏览器窗口的大小来触发这些断点,但 Chrome 开发者工具具有内置功能,可让您轻松查看网页在不同断点下的外观。

开发者工具的屏幕截图,其中我们的天气应用已打开,且宽度为 822 像素。
开发者工具显示天气应用以较宽的视口尺寸显示时的效果。
开发者工具的屏幕截图,其中我们的天气应用已打开,且宽度为 436 像素。
开发者工具显示天气应用以较窄的视口尺寸显示。

若要在不同断点下查看网页,请执行以下操作:

打开开发者工具,然后开启设备模式。 默认情况下,此工具会在自适应模式下打开。

如需查看媒体查询,请打开“Device Mode”菜单,然后选择 Show media query(显示媒体查询),将断点显示为页面上方的彩色条。

点击其中一个横条,可在媒体查询处于活动状态时查看网页。 右键点击横条可跳转到媒体查询的定义。