大多数现代网站使用响应性网页设计技术,以确保其外观良好、可读性好,并在任何屏幕大小的设备上保持可用性,如手机、平板电脑、笔记本电脑、台式电脑显示器、电视、投影仪等。
使用这些技术的站点有一个模板,该模板根据屏幕尺寸修改布局:
较小的屏幕通常显示线性、单列视图,其中通过单击(汉堡)图标激活菜单等UI控件。
更大的屏幕显示更多信息,可能带有水平对齐的侧栏。UI控件(如菜单项)可能始终可见,以便于访问。
响应式web设计的一个重要部分是实现CSS或JavaScript媒体查询,以检测设备大小并自动提供适合该大小的设计。我们将讨论为什么这些查询很重要以及如何使用它们,但首先,让我们讨论一般的响应式设计。
- 为什么响应式设计很重要?
- 响应式设计如何工作?
- 媒体查询最佳实践
- 媒体查询备选方案
- 您是否需要JavaScript中的媒体查询?
- 选项 1:监视视场维度
- 选项 2:定义和监视CSS自定义属性(可变)
- 选项 3: 使用匹配媒体API
为什么响应式设计很重要?
不可能只提供一个页面布局,而期望它在任何地方都能工作。
当手机在21世纪初首次获得基本的web访问时,网站所有者通常会创建两到三个单独的页面模板,松散地基于手机和桌面视图。随着设备种类呈指数级增长,这种做法变得越来越不切实际。
今天,有许多屏幕尺寸,从微型手表显示器到巨大的8K显示器甚至更大。即使你只考虑手机,最近的设备可以比许多低端笔记本电脑具有更高的分辨率。
移动设备的使用量也超过了台式电脑。除非你的网站有一组特定的用户,否则你可以期望大多数人通过智能手机访问它。尽管大多数网页设计师、开发人员和客户继续使用标准PC机,但小屏幕设备已不再是后知后觉,应该从一开始就加以考虑。
谷歌已经认识到移动设备的重要性。当网站在智能手机上可用且表现良好时,在谷歌搜索中排名会更好。好的内容仍然至关重要,但加载速度慢、无法适应用户群屏幕尺寸的网站可能会损害您的业务。
最后,考虑可访问性。一个适合所有人的网站,无论他们使用什么设备,都会吸引更多的观众。可访问性是许多国家的法律要求,但即使不是你所在的地方,也要考虑到更多的观众会带来更多的转换和更高的盈利能力。
响应式设计如何工作?
响应式设计的基础是媒体查询:一种CSS技术,可以根据输出类型(屏幕、打印机甚至语音)、屏幕尺寸、显示纵横比、设备方向、颜色深度和指针精度等指标应用样式。媒体查询还可以考虑用户偏好,包括减少动画、明暗模式和更高对比度。
我们展示的示例演示了仅使用屏幕宽度的媒体查询,但是站点可以更加灵活。有关详细信息,请参阅MDN上的全套选项。
媒体查询支持非常出色,已经在浏览器中使用了十多年。只有IE8及以下版本没有支持。它们忽略了媒体查询应用的样式,但这有时会带来好处(请参阅下面的最佳实践部分)。
使用媒体查询应用样式有三种标准方法。第一个加载HTML代码中的特定样式表。例如,当设备的屏幕宽度至少为800像素时,以下标记将加载wide.css样式表:
<link rel="stylesheet" media="screen and (min-width: 800px)" href="wide.css" rel="nofollow noopener" />
其次,样式表可以使用@import
规则有条件地加载到CSS文件中:
/* main.css */ @import url('wide.css') screen and (min-width: 800px);
请注意,应避免使用
@import
,因为每个导入的CSS文件都是渲染块。HTML的<link>
标记是并行下载的,而@import
则是串行下载文件。
更典型的是,您将使用@media CSS规则块在样式表中应用媒体查询,该规则块修改特定的样式。例如:
/* default styles */ main { width: 400px; } /* styles applied when screen has a width of at least 800px */ @media screen and (min-width: 800px) { main { width: 760px; } }
开发人员可以应用任何必要的媒体查询规则来调整站点的布局。
媒体查询最佳实践
最初设计媒体查询时,许多网站选择了一套固定的布局。这在概念上更易于设计和编码,因为它有效地复制了一组有限的页面模板。例如:
- 小于600px的屏幕宽度使用400px宽的移动式布局。
- 600px和999px之间的屏幕宽度使用600px宽的平板电脑布局。
- 大于1000px的屏幕宽度使用1000px宽的桌面式布局。
这项技术有缺陷。在非常小和非常大的屏幕上的结果可能看起来很差,并且随着设备和屏幕尺寸的变化,可能需要CSS维护。
一个更好的选择是使用带有断点的“移动第一流体”设计,该断点可以在特定大小下调整布局。本质上,默认布局使用最简单的小屏幕样式,将元素定位在线性垂直块中。
例如,<article>
和<aside>
在<main>
容器内:
/* default small-screen device */ main { width: 100%; } article, aside { width: 100%; padding: 2em; }
以下是所有浏览器的结果-即使是不支持媒体查询的非常旧的浏览器:
不支持媒体查询的示例屏幕截图。
当支持媒体查询且屏幕超过特定宽度(例如500px)时,<article>
和<aside>
元素可以水平放置。本例使用CSS网格,其中主要内容使用大约三分之二的宽度,次要内容使用剩余的三分之一:
/* larger device */ @media (min-width: 500px) { main { display: grid; grid-template-columns: 2fr 1fr; gap: 2em; } article, aside { width: auto; padding: 0; } }
以下是大屏幕上的结果:
支持媒体查询的示例屏幕截图
媒体查询替代方案
响应性设计也可以在现代CSS中使用更新的属性实现,这些属性本质上适应布局,而无需检查视口尺寸。选择包括:
calc
,min-width
,max-width
,min-height
,max-height
和较新的clamp
属性都可以定义尺寸标注,根据已知限制和可用空间调整图元的大小。- 视口单位
vw
,vh
,vmin
和vmax
可以根据屏幕尺寸分数调整元素的大小。 - 文本可以显示在CSS列中,在空间允许的情况下显示或消失。
- 可以使用
min-content
,fit-content
和max-content
维度,根据元素的子元素大小调整元素的大小。 - CSS flexbox可以在元素开始超出可用空间时进行换行或不换行。
- CSS网格元素可以使用比例分数
fr
单位调整大小。repeat CSS函数可以与minmax
,auto-fit
和auto-fill
结合使用,以分配可用空间。 - 新的和(当前)实验性的CSS容器查询可以对布局中组件可用的部分空间作出反应。
这些选项超出了本文的范围,但它们通常比只能响应屏幕尺寸的粗糙媒体查询更实用。如果您可以在没有媒体查询的情况下实现布局,那么随着时间的推移,它可能会使用更少的代码,更高效,并且需要更少的维护。
也就是说,在某些情况下,媒体查询仍然是唯一可行的布局选项。当你需要考虑其他屏幕因素时,它们仍然是必不可少的,比如纵横比、设备方向、颜色深度、指针精度,或者用户偏好,比如动画和光/暗模式。
您是否需要JavaScript中的媒体查询?
到目前为止,我们主要讨论CSS。这是因为大多数布局问题都可以而且应该单独用CSS来解决。
但是,在某些情况下,使用JavaScript媒体查询而不是CSS是可行的,例如:
- 诸如菜单之类的组件在小屏幕和大屏幕上具有不同的功能。
- 切换纵向/横向会影响web应用程序的功能。
- 基于触摸的游戏必须更改
<canvas>
布局或调整控制按钮。 - web应用程序遵循用户偏好,如暗/光模式、减少动画、触摸粗糙度等。
以下部分演示了在JavaScript中使用媒体查询或类似于媒体查询的选项的三种方法。所有示例都返回一个状态字符串,其中:
- 小视图=宽度小于400像素的屏幕;
- 中视图=宽度在400到799像素之间的屏幕;
- 大视图=宽度为800像素或更多的屏幕。
选项 1:监视视场维度
在媒体查询实施之前的黑暗日子里,这是唯一的选择。JavaScript将侦听浏览器“调整大小”事件,使用window.innerWidth
和window.innerHeight
(或旧IE中的document.body.clientWidth
和document.body.clientHeight
)分析视口尺寸,并做出相应的反应。
此代码将计算出的小、中或大字符串输出到控制台:
const screen = { small: 0, medium: 400, large: 800 }; // observe window resize window.addEventListener('resize', resizeHandler); // initial call resizeHandler(); // calculate size function resizeHandler() { // get window width const iw = window.innerWidth; // determine named size let size = null; for (let s in screen) { if (iw >= screen[s]) size = s; } console.log(size); }
您可以在此处查看工作演示。(如果使用桌面浏览器,请在新窗口中打开此链接,以便于调整大小。移动用户可以旋转设备。)
上面的示例在调整浏览器大小时检查视口大小;确定它是小型、中型还是大型;并将其设置为body元素上的类,从而更改背景颜色。
这种方法的优点包括:
- 它可以在每一个可以运行JavaScript的浏览器中运行——甚至是古老的应用程序。
- 您正在捕获准确的尺寸,并可以做出相应的反应。
缺点是:
- 这是一种需要大量代码的老技术。
- 是不是太精确了?你真的需要知道宽度是966px还是967px吗?
- 您可能需要手动将维度匹配到相应的CSS媒体查询。
- 用户可以快速调整浏览器大小,使处理程序功能每次都再次运行。这会通过限制事件来重载较旧和较慢的浏览器。它只能每500毫秒触发一次。
总之,除非有非常具体和复杂的大小调整要求,否则不要监视视口尺寸。
选项 2:定义和监视CSS自定义属性(可变)
这是一种稍微不寻常的技术,它在触发媒体查询时更改CSS中自定义属性字符串的值。所有现代浏览器(但不是IE)都支持自定义属性。
在下面的示例中,@media代码块内的--screen custom property
设置为“small”、“medium”或“large”:
body { --screen: "small"; background-color: #cff; text-align: center; } @media (min-width: 400px) { body { --screen: "medium"; background-color: #fcf; } } @media (min-width: 800px) { body { --screen: "large"; background-color: #ffc; } }
可以使用伪元素单独在CSS中输出该值(但请注意,它必须包含在单引号或双引号中):
p::before { content: var(--screen); }
您可以使用JavaScript获取自定义属性值:
const screen = getComputedStyle(window.body) .getPropertyValue('--screen');
但这并不是全部,因为返回值包含CSS中冒号后定义的所有空格和引号字符。字符串将为”large”,因此需要稍微整理一下:
// returns small, medium, or large in a string const screen = getComputedStyle(window.body) .getPropertyValue('--screen') .replace(/\W/g, '');
您可以在此处查看工作演示。(如果使用桌面浏览器,请在新窗口中打开此链接,以便于调整大小。移动用户可以旋转设备。)
该示例每两秒钟检查一次CSS值。它需要一点JavaScript代码,但需要轮询更改—您无法使用CSS自动检测到自定义属性值已更改。
也不可能将值写入伪元素,并使用DOM变异观察器检测更改。伪元素不是DOM的“真实”部分!
优点:
- 这是一种简单的技术,主要使用CSS并匹配真实的媒体查询。可以同时修改任何其他CSS属性。
- 无需复制或解析JavaScript媒体查询字符串。
主要缺点是无法自动对浏览器视口尺寸的更改作出反应。如果用户将手机从纵向旋转到横向,JavaScript永远不会知道。您可以经常轮询更改,但这是低效的,并且会导致您在演示中看到的时间延迟。
监视CSS自定义属性是一种新颖的技术,但只有在以下情况下才实用:
- 布局可以固定在页面最初呈现的位置。一个信息亭或销售点终端是可能的,但它们可能有固定的分辨率和单一的布局,因此JavaScript媒体查询变得无关紧要。
- 该网站或应用程序已经频繁运行基于时间的功能,如游戏动画。可以同时检查自定义属性,以确定是否需要更改布局。
选项 3: 使用matchMedia API
matchMedia API有点不同寻常,但它允许您实现JavaScript媒体查询。IE10以上的大多数浏览器都支持它。构造函数返回一个MediaQueryList对象,该对象的matches属性针对其特定的媒体查询计算为true或false。
当浏览器视口宽度为800px或更大时,以下代码输出true:
const mqLarge = window.matchMedia( '(min-width: 800px)' ); console.log( mqLarge.matches );
“change”事件可应用于MediaQueryList对象。每次matches属性的状态更改时都会触发此操作:它在先前为false(低于800px)后变为true(高于800px),反之亦然。
将MediaQueryList对象作为第一个参数传递给接收处理程序函数:
const mqLarge = window.matchMedia( '(min-width: 800px)' ); mqLarge.addEventListener('change', mqHandler); // media query handler function function mqHandler(e) { console.log( e.matches ? 'large' : 'not large' ); }
处理程序仅在matches属性更改时运行。当页面最初加载时,它不会运行,因此您可以直接调用函数来确定启动状态:
// initial state mqHandler(mqLarge);
当您在两个不同的状态之间移动时,API工作得很好。要分析三种或三种以上的状态,如small, medium和large,需要更多的代码。
首先用关联的matchMedia对象定义屏幕状态对象:
const screen = { small : null, medium: window.matchMedia( '(min-width: 400px)' ), large : window.matchMedia( '(min-width: 800px)' ) };
无需在small状态上定义matchMedia对象,因为在small和medium之间移动时,medium事件处理程序将触发。
然后可以为medium和large事件设置事件侦听器。它们调用相同的mqHandler()处理程序函数:
// media query change events for (let [scr, mq] of Object.entries(screen)) { if (mq) mq.addEventListener('change', mqHandler); }
处理程序函数必须检查所有MediaQueryList对象,以确定当前是活动的small、medium还是large。比赛必须按大小顺序进行,因为999px的宽度可以匹配中型和大型-只有最大的才能“获胜”:
// media query handler function function mqHandler() { let size = null; for (let [scr, mq] of Object.entries(screen)) { if (!mq || mq.matches) size = scr; } console.log(size); }
您可以在此处查看工作演示。(如果使用桌面浏览器,请在新窗口中打开此链接,以便于调整大小。移动用户可以旋转设备。)
使用的示例有:
- CSS中的媒体查询以设置和显示自定义属性(如上面的选项2所示)。
- matchMedia对象中的相同媒体查询,以监视JavaScript中的维度更改。JavaScript输出将在同一时间发生变化。
使用matchMedia API的主要优点是:
- 它是事件驱动的,能够高效地处理媒体查询更改。
- 它使用与CSS相同的媒体查询字符串。
缺点是:
- 处理两个或多个媒体查询需要更多的思考和代码逻辑。
- 您可能需要在CSS和JavaScript代码中复制媒体查询字符串。如果不保持同步,这可能会导致错误。
为了避免媒体查询不匹配,可以考虑在构建系统中使用设计令牌。媒体查询字符串在JSON(或类似)文件中定义,值在构建时插入CSS和JavaScript代码。
总之,matchMedia API可能是实现JavaScript媒体查询的最有效、最实用的方法。它有一些怪癖,但在大多数情况下它是最好的选择。
小结
固有的CSS大小选择越来越可行,但媒体查询仍然是大多数网站响应性web设计的基础。它们在处理更复杂的布局和用户偏好(如明暗模式)时总是必需的。
尽可能将媒体查询单独保存到CSS。当您别无选择,只能进入JavaScript领域时,matchMedia API为JavaScript媒体查询组件提供了额外的控制,这些组件需要额外的基于维度的功能。