Responsive design

 

在网页设计的早期,页面是针对特定屏幕尺寸而构建的. 如果用户的屏幕大于或小于设计者预期的结果,则范围从不需要的滚动条到过长的行长以及对空间的不良使用. 随着越来越多的屏幕尺寸出现, 响应式网页设计 (RWD)的概念出现了,这是一系列允许网页更改其布局和外观以适应不同的屏幕宽度,分辨率等的做法.我们为多设备Web设计的方式.在本文中,我们将帮助您了解掌握该网络所需的主要技术.

Prerequisites: HTML基础知识(研究HTML简介 ),以及CSS的工作原理(研究CSS第一步CSS构建块) .
Objective: 了解响应式设计的基本概念和历史.

Historic website layouts

在历史的某一时刻,设计网站时有两种选择:

  • 您可以创建一个流动的网站,该网站将扩展为填充浏览器窗口
  • 固定宽度的网站,以像素为单位固定大小.

这两种方法倾向于使网站在设计网站的人的屏幕上看起来最好! 液体位置导致在较小的屏幕上挤压设计(如下所示),而在较大的屏幕上出现难以理解的长线长.

A layout with two columns squashed into a mobile size viewport.

注意 :请参见以下简单的液体布局: 示例源代码 . 查看示例时,将浏览器窗口移入和移出以查看不同大小的外观.

固定宽度的网站可能会在小于网站宽度的屏幕上出现水平滚动条(如下所示),而在较大的屏幕上,设计边缘会出现大量空白.

A layout with a horizontal scrollbar in a mobile viewport.

注意 :请参见以下简单的固定宽度布局: 示例源代码 . 同样,在更改浏览器窗口大小时观察结果.

注意 :上面的屏幕截图是使用Firefox DevTools中的自适应设计模式拍摄的.

随着首批功能手机开始成为移动网络的现实,希望使用移动电话的公司通常会使用不同的URL(通常是m.example.comexample.mobi之类的东西)来创建其网站的特殊移动版本. ). 这意味着必须开发该站点的两个独立版本并保持最新.

另外,这些移动站点通常提供非常缩减的体验. 随着移动设备变得越来越强大并能够显示完整的网站,这使移动用户感到沮丧,他们发现自己陷于该网站的移动版本中,而无法访问他们所知道的功能齐全的网站桌面版本上的信息.

Flexible layout before responsive design

开发了许多方法来尝试解决流动或固定宽度的网站构建方法的弊端. 2004年,卡梅隆·亚当斯(Cameron Adams)撰写了一篇题为" 分辨率相关的布局"的文章 ,描述了一种可以适应不同屏幕分辨率的设计方法. 这种方法需要JavaScript来检测屏幕分辨率并加载正确的CSS.

佐伊·米克利·吉伦沃特(Zoe Mickley Gillenwater)在她的工作中发挥了重要作用 ,描述并形式化了创建灵活站点的各种方式,试图在填充屏幕或完全固定大小之间找到一个快乐的媒介.

Responsive design

响应式设计是Ethan Marcotte在2010年提出的 ,它描述了三种技术的结合使用.

  1. 首先是流体网格的概念,吉伦沃特(Gillenwater)已经对此进行了探索,可以在Marcotte的文章《 流体网格》 (2009年在A List Apart上发表)中进行阅读.
  2. 第二种技术是流体图像的概念. 使用一种非常简单的技术将max-width属性设置为100% ,如果图像的包含列变得比图像的固有大小窄,但图像永远不会变大,则图像将按比例缩小. 这使图像可以按比例缩小以适合灵活尺寸的列,而不是使其溢出,但是如果列变得比图像宽,则图像不会变大并变得像素化.
  3. The third key component was the media query. Media Queries enable the type of layout switch that Cameron Adams had previously explored using JavaScript, using only CSS. Rather than having one layout for all screen sizes, the layout could be changed. Sidebars could be repositioned for the smaller screen, or alternate navigation could be displayed.

重要的是要了解响应式网页设计不是一项单独的技术 ,它是一个术语,用于描述网页设计方法或一组最佳实践,用于创建可以响应所查看设备的布局内容. 在Marcotte最初的探索中,这意味着使用灵活的网格(使用浮点数)和媒体查询,但是自撰写该文章以来的近十年中,响应式工作已成为默认方法. 现代CSS布局方法本质上是响应式的,我们在Web平台中内置了新功能,使响应式网站的设计更加容易.

本文的其余部分将为您提供创建响应网站时可能要使用的各种Web平台功能.

Media Queries

响应式设计只能由于媒体查询而出现. Media Queries 3级规范在2009年成为候选推荐标准,这意味着该标准已被认为可以在浏览器中实施. 媒体查询允许我们运行一系列测试(例如,用户的屏幕是否大于特定宽度或特定分辨率),并选择性地应用CSS来根据用户需要对页面进行适当样式设置.

For example, the following media query tests to see if the current web page is being displayed as screen media (therefore not a printed document) and the viewport is at least 800 pixels wide. The CSS for the .container selector will only be applied if these two things are true.

@media screen and (min-width: 800px) { 
  .container { 
    margin: 1em 2em; 
  } 
} 

您可以在样式表中添加多个媒体查询,从而调整整个布局或部分布局以最适合各种屏幕尺寸. 引入媒体查询和更改布局的点称为断点 .

使用"媒体查询"的一种常见方法是为窄屏设备(例如手机)创建简单的单列布局,然后在知道您有足够的屏幕宽度来处理时检查较大的屏幕并实施多列布局它. 通常将其描述为移动优先设计.

在MDN文档的" 媒体查询"中找到更多信息.

Flexible grids

响应站点不仅在断点之间更改其布局,而且还建立在灵活的网格上. 灵活的网格意味着您不需要针对所有可能的设备尺寸,而为其构建像素完美的布局. 鉴于存在大量不同大小的设备,并且至少在台式机上,人们并不总是将其浏览器窗口最大化,这一方法将是不可能的.

通过使用灵活的网格,您只需要添加一个断点并在内容开始看起来不好的地方更改设计. 例如,如果随着屏幕尺寸的增加,行的长度变得无法阅读,或者当一个框变窄时,该行将被压缩成每行两个单词.

在响应式设计的早期,我们执行布局的唯一选择是使用floats . 通过给每个元素指定一定百分比的宽度,并确保整个布局的总和不超过100%,可以实现灵活的浮动布局. 在有关流体网格的原始文章中,Marcotte详细介绍了一个公式,该公式用于获取使用像素设计的布局并将其转换为百分比.

target / context = result 

例如,如果我们的目标列大小为60像素,并且其所在的上下文(或容器)为960像素,则在将小数点移至两个位置后,我们将60除以960得到可在CSS中使用的值.正确的.

.col { 
  width: 6.25%; /* 60 / 960 = 0.0625 */ 
} 

如今,这种方法可以在网络上的许多地方找到,并在" 旧版式布局方法"文章的"布局"部分中进行了记录. 您可能会在工作中使用这种方法来访问网站,因此即使您不会使用基于浮动的灵活网格来构建现代网站,也值得一读.

以下示例演示了使用媒体查询和灵活网格的简单响应式设计. 在狭窄的屏幕上,布局显示了彼此堆叠的框:

A mobile view of the layout with boxes stacked on top of each other vertically.

在更大的屏幕上,它们移至两列:

A desktop view of a layout with two columns.

注意 :您可以在GitHub上找到该示例实时示例源代码 .

Modern layout technologies

默认情况下,现代的布局方法(如多列布局FlexboxGrid)是响应式的. 他们都假定您正在尝试创建一个灵活的网格,并为您提供了更简便的方法.

Multicol

这些布局方法中最早的一种是multicol-当您指定column-count ,它指示您希望内容分成多少列. 然后,浏览器计算出它们的大小,该大小将根据屏幕大小而变化.

.container { 
  column-count: 3; 
} 

如果改为指定column-width ,则指定最小宽度. 浏览器将创建尽可能舒适地适合容器的宽度的列,然后共享所有列之间的剩余空间. 因此,列数将根据存在的空间而变化.

.container { 
  column-width: 10em; 
} 

Flexbox

在Flexbox中,弹性项目将根据其初始行为收缩并根据其容器中的空间在项目之间分配空间. 通过更改flex-growflex-shrink的值,可以指示当项目在它们周围遇到更多或更少的空间时希望它们如何表现.

在下面的示例中,flex项将使用flex: 1的简写在flex容器中各自占据相等的空间,如布局主题Flexbox:flex项的灵活大小中所述 .

.container { 
  display: flex; 
} 

.item { 
  flex: 1; 
} 

注意 :作为示例,我们使用flexbox重建了上面的简单响应式布局. 您可以看到我们不再需要使用奇怪的百分比值来计算列的大小: 例如源代码 .

CSS grid

在CSS网格布局中, fr单位允许在网格轨道之间分配可用空间. 下一个示例创建一个网格容器,其中包含三个轨道,大小为1fr . 这将创建三个列轨道,每个列轨道占用容器中可用空间的一部分. 您可以在"学习带有fr的网格"下的"学习布局网格"主题中找到有关此方法的更多信息.

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

注意 :网格布局版本更加简单,因为我们可以在.wrapper上定义列: 示例源代码 .

Responsive images

最简单的响应式图像处理方法如Marcotte早期关于响应式设计的文章所述. 基本上,您将拍摄可能需要的最大尺寸的图像,然后将其缩小. 今天仍然使用这种方法,在大多数样式表中,您会在以下位置找到以下CSS:

img {
  max-width: 100%:
} 

这种方法有明显的缺点. 显示的图像可能比其固有大小小很多,这浪费带宽-移动用户下载的图像可能是其在浏览器窗口中实际看到的大小的几倍. 此外,您可能不希望移动设备上的图像纵横比与桌面上的图像纵横比相同. 例如,在移动设备上使用正方形图像可能会很好,但是在桌面上显示与风景图像相同的场景. 或者,如果确认移动设备上的图像较小,则可能希望完全显示另一幅图像,在较小的屏幕尺寸下更容易理解该图像. 这些事情无法通过简单地按比例缩小图像来实现.

响应图像,使用<picture>元件和<img> srcsetsizes属性解决这两个问题. 您可以提供多种尺寸以及"提示"(描述图像最适合的屏幕尺寸和分辨率的元数据),浏览器将为每个设备选择最合适的图像,以确保用户下载图像尺寸适用于他们正在使用的设备.

您还可以对直接以不同尺寸使用的图像进行美工 ,从而为不同的屏幕尺寸提供不同的裁剪或完全不同的图像.

您可以在MDN上的"学习HTML"部分中找到有关响应式图像的详细指南 .

Responsive typography

早期工作中未涉及的响应式设计要素是响应式排版的思想. 本质上,这描述了在媒体查询中更改字体大小以反映更少或更多的屏幕空间.

在此示例中,我们希望将1级标题设置为4rem ,这意味着它将是基本字体大小的四倍. 这是一个很大的标题! 我们只希望在较大的屏幕尺寸上使用此巨型标题,因此,如果我们知道用户的屏幕尺寸至少为1200px ,则首先创建较小的标题,然后使用媒体查询将其覆盖较大的1200px .

html { 
  font-size: 1em; 
} 

h1 { 
  font-size: 2rem; 
} 

@media (min-width: 1200px) { 
  h1 {
    font-size: 4rem; 
  }
} 

我们已经编辑了上面的响应网格示例,以使用概述的方法包括响应类型. 您将看到标题如何随着布局转到两列版本而切换大小.

在移动设备上,标题较小:

A stacked layout with a small heading size.

但是,在台式机上,我们会看到较大的标题:

A two column layout with a large heading.

注意 :实际操作中请参见以下示例: 示例源代码 .

正如这种排版方法所示,您无需将媒体查询限制为仅更改页面的布局. 它们可用于调整任何元素,以使其在其他屏幕尺寸下更可用或更具吸引力.

Using viewport units for responsive typography

一种有趣的方法是使用视口单元vw启用响应式排版. 1vw等于视口宽度的百分之一,这意味着如果使用vw设置字体大小,它将始终与视口的大小有关.

h1 {
  font-size: 6vw;
}

进行上述操作的问题在于,用户失去了使用vw单位缩放任何文本集的能力,因为该文本始终与视口的大小有关. 因此,永远不要仅使用视口单位设置文本 .

有一个解决方案,它涉及使用calc() . 如果将vw单位添加到使用固定大小(例如emrem的值集,则文本仍可缩放. 本质上, vw单位会在该缩放值的基础上添加:

h1 {
  font-size: calc(1.5rem + 3vw);
}

这意味着我们只需要为标题指定一次字体大小,而无需为移动设备设置字体大小并在媒体查询中重新定义它. 然后,字体会随着您增加视口的大小而逐渐增加.

请参见实际操作中的示例: example源代码 .

The viewport meta tag

如果查看响应页面的HTML源,通常会在文档的<head>中看到以下<meta>标记.

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

此meta标签告诉移动浏览器他们应该将视口的宽度设置为设备宽度,并将文档缩放到其预期大小的100%,这将以您希望的针对移动设备优化的大小显示文档.

为什么需要这个? 因为移动浏览器倾向于隐藏视口宽度.

之所以存在这个meta标签,是因为当最初的iPhone推出并且人们开始在小手机屏幕上查看网站时,大多数网站并未针对移动设备进行优化. 因此,移动浏览器将视口宽度设置为960像素,以该宽度渲染页面,并将结果显示为桌面布局的缩小版本. 其他移动浏览器(例如,在Google Android上)也做了同样的事情. 用户可以放大并在网站上平移以查看他们感兴趣的内容,但是看起来很糟糕. 如果您不幸遇到一个没有响应式设计的站点,今天您仍然会看到此消息.

问题在于,带有断点和媒体查询的响应式设计无法在移动浏览器上正常工作. 如果您的窄屏布局可以以小于或等于480像素的视口宽度启动,并且视口设置为960像素,那么您将永远不会在移动设备上看到窄屏布局. 通过设置width=device-width您将用设备的实际宽度覆盖Apple的默认width=960px ,因此您的媒体查询将按预期工作.

因此,您应该始终在文档的开头包含以上HTML行.

您还可以将其他设置与视口meta标记一起使用,但是通常,上面的一行是您要使用的设置.

  • initial-scale :设置页面的初始缩放initial-scale ,我们将其设置为1.
  • height :设置视口的特定高度.
  • minimum-scale :设置最小缩放级别.
  • maximum-scale :设置最大缩放级别.
  • user-scalable :如果设置为no则禁止缩放.

您应该避免使用minimum-scalemaximum-scale ,特别是将user-scalable设置为no . 应该允许用户根据需要放大或缩小. 防止这种情况会导致可访问性问题.

注意 :有一个CSS @规则旨在替换视口元标记— @viewport ,但是它对浏览器的支持较差. 同时使用两者时,元标记会覆盖@viewport.

Summary

响应式设计是指对所查看的环境做出响应的站点或应用程序设计. 它包含许多CSS和HTML功能和技术,现在基本上就是我们默认情况下构建网站的方式. 考虑一下您在手机上访问过的网站-遇到一个桌面版本缩小的网站,或者需要横向滚动查找内容的网站,这可能是非常不寻常的. 这是因为网络已经转向这种响应式设计的方法.

借助您在这些课程中学到的布局方法,实现响应式设计也变得容易得多. 如果您今天不熟悉Web开发,那么与早期的响应式设计相比,您可以使用更多的工具. 因此,值得检查您参考的任何材料的使用期限. 尽管历史文章仍然有用,但无论您的访客使用什么设备浏览网站,现代使用CSS和HTML都可以轻松创建优雅且有用的设计.

In this module