2023 年的响应式设计指南

大家好，我是Echa。

如今，当大家考虑构建流畅的布局时，没有再写固定宽度和高度数值了。相反，小编今天构建的布局需要适用于几乎任何尺寸的设备。是不是不可思议，小编仍然看到网站遵循自适应设计模式，其中它有一个容器来获取新的max-width视口宽度的值。

Web 是普遍存在的，也是无处不在的，Web可以适应任何尺寸的屏幕以及任何使用环境，因为Web有其固有的灵活性和可塑性。

Web 再也不是某一平台独有的矿藏，而是真正成为了一张名副其实的大网，并将各种设备彼此连接在一起。

而作为开发人员要想不被这愈发迅猛的设备大潮所吞噬，就必须抛弃之前的一切，转而学会适应它、尊重它。

“响应式”一词现在有很多含义。我们有检查用户偏好的媒体查询，以及帮助我们甚至不使用媒体查询就做出流畅布局的现代CSS功能。

介绍

当我听到“响应式设计”这个术语时，我首先想到的是不同的设备尺寸。它就在我的潜意识里。我打赌你们中的一些人可能也有同样的想法。目前，响应式设计意味着很多不同的事情。

我与客户和设计师交流过，他们认为响应式设计就是简单地将网页设计成两个版本:一个用于桌面，另一个用于移动。如今，这被认为是一种陈旧、过时的处理网络的方式。

考虑以下设计。我们有一个需要响应的典型布局。

设计师的思路是这样的:

• 行与行的间距留宽点，
• 缩小字体大小，
• 把模块叠起来。

你看！这是一个响应式的设计。我希望它是简单的，但是有许多事情我们需要考虑。作为一名设计师和前端开发人员，如果我考虑桌面设计，我会有很多问题:

• 当页面(内容和图片)的时候我们怎么换行？
• 字体大小是放大缩小的？还是只写一个固定值来进行调整？
• 我们需要使用什么样的响应式布局？
• 我们需要预览多少间距？
• 卡片列表在移动端和PC上距离之间，是否应该显示不同的卡片？小卡片图像是否有特定写死的长宽值？
• 用户偏好:是否有任何UI细节会基于用户减少的运动主题/颜色方案而改变

考虑到这个例子，我们可以用类似于下面的方式来思考:

使用现代CSS

• 字体设计响应式通过以下方式调整视口宽度clamp()功能。
• 间距响应式通过以下方式调整视口宽度clamp()功能。
• 内容区响应式布局，把内容通过柔性盒包装.
• 网格式布局响应式到可用空间minmax()，没有媒体提问。
• 卡片模块响应式布局，它包括大小容器查询和样式容器查询.
• 边距和填充响应式布局到网站内容间距.

使用媒体查询

• 网站导航响应式到视口宽度。
• 主题化响应式他们操作系统中的用户体验。
• 卡片悬停效果响应式用户在使用什么(触摸和鼠标)。

在上面的列表中，主题化和导航是通过媒体查询完成的。剩下的是现代CSS特性，比如clamp()比较函数和容器查询。

随着时间的推移，媒体查询将用于与视区宽度相关的组件，如站点导航和页脚。现代CSS特性的使用可以帮助我们构建响应容器或用户偏好的布局和组件。

响应式设计不再是关于媒体的询问。

不幸的是，我发现有一种心态是错误的。许多网络新手认为“输入框架名称”是建立一个响应性网站的方法。我曾经和一个客户争论过，我们不需要“输入框架名称”来构建响应性网站。我告诉他们，我们可以使用CSS媒体查询，因为它是他们提到的框架的构建模块。

多年来的响应式设计

我的web开发之旅始于2014年年中。当时，响应式设计是一个热门话题，每个人都在谈论它。

Bootstrap framework

作为一个web新手，我了解了Bootstrap framework，它非常流行。我认为这是制作响应式布局的最佳方式。有一天，我决定去掉引导CSS，自己写CSS媒体查询。我很惊讶，因为它似乎没有我想象的那么难。

媒体查询

想到Bootstrap-is-easy让我觉得CSS媒体查询很难，今天我遇到的一些前端开发人员仍然在使用它。对他们来说，响应等于引导。我不能忽视这样一个事实，Bootstrap是最好的和最流行的CSS框架之一，由马克·奥托.

许多前端开发人员使用Bootstrap来开发其强大的导航栏和网格系统。我记得有一次我检查一个网站，立刻就知道它是用Bootstrap构建的(当时我称之为“Bootstrap smokes”)。

固定宽度断点思维模式

使用框架迫使许多开发人员认为响应式是三个断点:移动、平板和桌面。其他的或者中间的都无所谓。

我个人不喜欢的一点是容器元素的宽度是固定的，它会根据视口宽度而变化。

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
           

请考虑下图:

当视口宽度变小时max-width将强制容器的宽度小于视口的宽度。在这种情况下，让容器横跨屏幕的整个宽度会好得多。

我们只需要一个max-width以避免在宽屏幕上出现非常大的容器。

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
           

让我给你看一个更详细的例子。

假设我们有一个卡片网格。在第一种情况下，随着宽度的改变，它的max-width多次。

在类似tablet的视图中，容器将受到其max-width，留下一大块空白空间。

注意两边的空白处。用那个做容器不是更好吗？考虑到我们是在平板电脑上看的。

当在更小的视窗中查看设计时，它的两边仍然会有空白。

我们能做得更好吗？这浪费了大量的空间。我只是找不到在2023年实施这一计划的合理理由。

移除max-width对于较小的视口，将导致容器采用整个视口宽度。

对于较小的尺寸:

响应式设计和有趣的网站

我不能忽视这样一个事实，即响应式设计与创建有趣、相似的网站有着这样或那样的关系。这适用于基于Bootstrap主题构建主题。

许多网站开始变得千篇一律。2016年初，我看到一个自录音再现装置发出的高音这正好反映了当时的“响应式设计”。在我看来，这要归功于CSS Bootstrap的流行。

你目前正在设计两个可能的网站中的哪一个？

很有趣，但是很现实，不是吗？

这使得响应式设计看起来像一个简单且可预测的过程。我也是受这种风格影响的设计师之一。只是现在想起那些日子感觉怪怪的。

当前的CSS功能已经强大到可以在所有尺寸的屏幕上实现任何功能。

准备好从另一个角度探索响应式设计了吗？我们走吧。

默认情况下，web是有响应的

要事第一，对吗？对我来说，我认为网络是默认响应的。仔细想想，在没有任何CSS的情况下添加一堆HTML元素，可以在任何屏幕尺寸上工作。

下面是一个添加标题、段落和列表的例子。

默认情况下它是有反应的，直到我们决定把东西移动到彼此旁边。假设我添加了以下CSS:

body {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-gap: 1rem;
}

ul {
	grid-column: 2/3;
	padding-left: 1rem;
}
           

上图看着还不错吧？但是当我们把它调整到更小的尺寸时，乐趣就开始了。

所以，网络是默认响应的，除非我们开始在设计我们的布局时变得有创造性。

2023年响应式布局设计

我不从媒体询问的角度考虑响应式设计，而是从这些方面考虑响应式设计。

响应于该内容

通过编写可以处理不同内容长度的CSS，我们可以确保UI正常工作，不会因为用户添加了不同的内容而崩溃。

响应于该视口

组件只需要基于视口工作吗？这适用于网站的页眉、页脚和全角部分。他们需要按照视窗大小工作。

视窗不仅仅是宽度的问题。我们还需要在某些情况下查询高度。

@media (min-height: 700px) {
  .site-header {
    /* position: fixed or position: sticky */
  }
}
           

响应于容器

当一个组件需要根据它在文档中的位置改变它的样式时，容器查询就派上了用场。

响应于用户偏好

组件是否需要根据特定的用户偏好进行更改？例如:改变主题，字体大小，合同，减少议案。

我现在如何看待响应式设计

建立一个响应性网站的核心是让他们流畅。流体意味着太多东西:

• 容器查询
• 封装
• 元素尺寸
• 字体大小
• 间隔
• 可用空间
• 逻辑属性

具有像flexbox、grid和clamp()比较功能，我们可以指示浏览器在某些情况下做什么。我们不必手动处理设计中的每一个细节。

当构建一个组件时，我更喜欢保持一种流动的心态。我们举个例子。

一个简单例子

现代CSS为我们提供了无需完全依赖媒体查询就能编写响应性样式的方法。例如，在flex-wrap属性有助于在有足够空间的情况下允许对同级进行换行。

.reaction-button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
           

这里有三个很好的细节:

1. 它有条件地换行。没有空间？好吧，把东西包起来。
2. 在水平和垂直样式中保持居中。
3. 这gap按需工作。如果它们是水平的，则行间距仅处于活动状态。如果它们是堆叠的，则第一列有效。

有趣的是，所有这些都是在没有使用任何媒体询问的情况下做出的。让我们将同样的思想应用于一个更大的组件。

构建响应式布局的现代方法

如今CSS变得如此强大。我们非常支持CSS变量、flexbox和grid。最新的功能，如:has最新的浏览器(几乎)都支持选择器和容器查询。

这意味着响应式设计的未来将会改变。这并不是说要把整个页面都看作是响应性的。相反，我们将为组件编写响应式CSS，并让浏览器自行决定组件何时应该具有特定的样式。

在接下来的几节中，我将讨论一些现代CSS特性，以及它们如何帮助我们写出真正的响应式设计。有些根本不需要媒体询问。

CSS flexbox

就像前面的例子一样，使用flex-wrap属性，我们可以允许flex项换行，并且可以通过指定flex每个弹性项目的值。

这是强大的，有助于为响应式组件建立基础。

构建文章组件的布局

在这个例子中，我们有一个卡片组件，它在左边包含一个图像，在右边包含内容。

和前面的例子一样，flexbox非常适合作为基础。假设我为标题、图像、间距..等等，我们可以得到如下结果:

接下来，我们可以开始为此进行布局。我将默认使用flexbox来获得包装的好处。

.c-card {
  display: flex;
}
           

酷，现在我们有了卡片的缩略图和内容。接下来是允许换行和重置默认对齐。

.c-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
           

我们又回到了最初的结果！没关系，我们会修好的。

发生这种情况是因为图像太大，结果它被换行。

我们接下来需要做的是指示浏览器何时包装商品通过使用强大的flex财产。

.c-article__thumb {
  flex: 1 1 550px;
}

.c-article__content {
  flex: 1 1 350px;
}
           

这个想法是我们可以使用flex根据可用空间放大或缩小项目。

你看到了吗？响应式设计不再是关于媒体的询问。

.c-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.c-article__thumb {
  flex: 1 1 550px;
}

.c-article__content {
  flex: 1 1 350px;
}
           

我们也可以使用wrap-reverse颠倒缩略图和内容的顺序。

.c-card {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: flex-start;
}
           

我们不仅可以对卡片使用相同的方法，而且它可以用于文学上的任何其他东西。

段标题

我们有一个包含标题和链接的标题部分。

当空间不够时，我们希望标题换行。这是我们需要的一切:

.section-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.section-header__title {
  flex: 1 1 400px;
}
           

这400px值是将进行换行的自定义断点。当标题为400px或以下时，它将换行。

对于媒体查询，可以这样做:

@media (min-width: 650px) {
  .section-header {
    display: flex;
    /* No wrapping is needed */
  }
}
           

这将很好地工作，直到我们需要在不同的包装器中使用节头。例如，在主要部分和旁注中。

与flex-wrap解决方案，即使在像side这样的小容器中使用，节头也可以工作。

如果项目彼此靠得太近，它们将动态换行，布局中不会出现任何奇怪的情况。

而在媒体查询中，我们需要使用一个变体类来定位side元素中的部分标题。

@media (min-width: 800px) {
  .section-header--aside {
    display: flex;
    /* No wrapping is needed */
  }
}
           

这对我来说算是一次黑客攻击。并不是在所有情况下都行得通。当我们改变侧面宽度时，它可能会断裂。

注意:使用容器查询可以更好地解决这个问题，我将在本文的后面讨论这个问题。

CSS网格布局

今天，我们可以构建高度可定制的网格布局。我不会解释CSS grid的一切，因为我可能会写一本书，但我会分享一些现在所有浏览器都支持的东西。

考虑下面的例子。

这是我的文章中的一个例子CSS网格区域。这是我多年前参与的一个项目。这个团队需要两种不同的布局，但是没有比CSS grid更好的了。

<div class="c-newspaper">
  <article class="c-article c-article--1"></article>
  <article class="c-article c-article--2"></article>
  <article class="c-article c-article--featured"></article>
  <article class="c-article c-article--3"></article>
  <article class="c-article c-article--4"></article>
  <article class="c-article c-article--5"></article>
  <article class="c-article c-article--6"></article>
  <article class="c-article c-article--7"></article>
</div>
           

.c-newspaper {
  display: grid;
  grid-template-columns: 0.2fr 0.6fr 0.2fr;
  grid-template-areas:
    "item-1 featured item-2"
    "item-3 featured item-4"
    "item-5 item-6 item-7";
  grid-gap: 1rem;
}

.c-article--1 {
  grid-area: item-1;
}

.c-article--2 {
  grid-area: item-2;
}

/*..And so on for other elements.. each one has a grid-area..*/

.c-article--7 {
  grid-area: item-7;
}

.c-article--featured {
  grid-area: featured;
}
           

对于第二种变化，我们需要做的就是改变模板区域。

.c-newspaper.variation-1 {
  grid-template-areas:
    "featured featured item-3"
    "item-1 item-2 item-4"
    "item-5 item-6 item-7";
}
           

在较小的视窗中，我们将需要媒体查询来改变模板区域，但这是非常强大的。通过一点指导，我们可以为这个特色编辑布局创建一个无限的选项集。

CSS grid中另一个有用的特性是minmax()功能。简而言之，它允许我们创建一个网格，在没有任何媒体查询的情况下动态地改变列宽。

考虑下面的CSS。

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  grid-gap: 1rem;
}
           

我们有一个包含3列的网格，当视窗变小时，我们希望它们能调整大小。这minmax()函数与混合auto-fill非常适合。

没有了minmax()函数，我们别无选择，只能使用媒体查询来根据视口宽度更改列。

一个简单的例子:

@media (min-width: 992px)
	.wrapper__item {
		width: 33%;
	}
}
           

你可以了解有关minmax()的更多信息在我的文章里。

变动尺寸

当今响应式设计中我最喜欢的一个方面是构建流畅的布局。起初，使用视口单位可以做到这一点，但并不完美。我们需要一种方法来添加一个限制，否则字体大小会在大屏幕上放大。

h2 {
  font-size: calc(1rem + 5vw);
}

/* If the viewport width is 2000px or more, limit
* the font size to 4rem.
*/
@media (min-width: 2000px) {
  font-size: 4rem;
}
           

大约三年前，我们得到了支持CSS比较函数。他们是游戏规则的改变者，在不需要媒体询问的情况下建立真正流畅的布局。

考虑下面的例子。

h2 {
  font-size: clamp(1rem, 0.5rem + 2.5vw, 3rem);
}
           

字体大小将根据视窗宽度而变化。如果我想形象化这一点，它可以是类似下图的东西。

如果我们想对媒体查询也这样做，我们将得到9个查询。你能想象吗？一点都不实用。想象一下，在一个网站的许多用例中这样做，简直是一场噩梦！

我以前也做过类似的事情。

h2 {
  font-size: 1rem;
}

@media (min-width: 800px) {
  h2 {
    font-size: 2.5rem;
  }
}

@media (min-width: 1400px) {
  h2 {
    font-size: 5rem;
  }
}
           

有了流动规模，我们将把我们的思维从固定值转移到流动值。我把它想象成给浏览器提供一个最小值和一个最大值，并让它完成剩下的工作。

让我们探讨几个变动尺寸设计真正出彩的例子。

动态间隙

与gap属性，我们可以创建一个根据视区或容器大小而变化的动态间距。

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(1rem, 2vw, 24px);
}
           

对于多余部分，我们可能需要根据视口大小更改垂直填充。半铸钢ˌ钢性铸铁(Cast Semi-Steel)clamp()用视口单位是完美的。

.hero {
  padding: clamp(2rem, 10vmax, 10rem) 1rem;
}
           

大小容器查询

CSS容器查询是支持现在在所有浏览器中。它们在2022年8月在Chrome中变得稳定。它们被称为“大小”，因为它们基于容器的宽度工作，还因为现在我们有了样式容器查询。

这是一个改变游戏规则的事件，我无法抑制我的兴奋之情。简而言之，它为我们提供了查询组件的容器宽度的方法。

考虑下图。

请注意在左边，卡片是如何根据视口宽度进行更改的，而在右边，它们是如何根据容器宽度进行更改的。

让我们探索几个用例。

文章组件

我最喜欢的容器查询用例之一是文章组件。根据容器宽度，我们有4种不同的风格:

• 默认情况下，类似卡片的外观。
• 带有小缩略图的水平卡片。
• 有大拇指甲的横牌。
• 如果父页面太大，风格会像英雄一样，表明这是一篇特色文章。

查看演示.

分页组件

我们可以根据容器宽度来切换不同版本的分页组件。这为我们提供了更多关于何时从一个变体切换到另一个变体的确定性。

.wrapper {
  container-type: inline-size;
}

@container (min-width: 250px) {
  .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .pagination li:not(:last-child) {
    margin-bottom: 0;
  }
}

@container (min-width: 500px) {
  /* Styles when container >= 500px */
}
           

探索更多容器查询的用例在我的CSS实验室里。

大小容器查询单位

如果我希望基于容器而不是视口进行流体大小调整，会发生什么情况？现在有了容器查询，这是可能的。

我们可以通过简单地替换vw随着cqw.

.c-article__title {
  font-size: clamp(1.25rem, 2.5cqw + 1rem, 2.5rem);
}

.c-article__content > * + * {
  margin-top: clamp(0.8rem, 1cqw + 0.8rem, 1.5rem);
}
           

容器查询单元基于容器宽度工作。因此，我们得到的值更加灵活，更符合预期。这样，我们可以在任何我们想要的组件中使用它们。

这太强大了。

样式容器查询

这在浏览器中仍然不稳定，但在Chrome中很快就会实现。简而言之，我们将能够检查一个元素是否有一个特定的CSS变量，并基于该变量来设计其子项的样式。

组件级主题切换

在某些情况下，我们可能需要根据组件所在的位置来切换组件的主题。

在下面的例子中，如果stats组件位于第二部分，我希望它将其主题更改为dark。

我们可以这样做:

.special-wrapper {
  --theme: dark;
  container-name: stats;
}

@container stats style(--theme: dark) {
  .stat {
    /* Add the dark styles. */
  }
}
           

了解更多关于样式查询.

物品组件

基于容器宽度切换文章样式是有用的，但有时我们需要仅在需要时才允许这样做。风格查询都可以！

我们需要做的是添加一个CSS变量，并检查它是否存在。如果是，那么我们需要有我们想要的特定风格。

.o-grid__item {
  container-type: inline-size;
  --horizontal: true;
}

@container (min-width: 400px) and style(--horizontal: true) {
  /* Horizontal style */
}
           

这样，文章将根据其容器宽度而变化只有当--horizontal变量被设置为真.

用户首选项媒体查询

用户偏好媒体查询的一个例子是检查偏好的颜色方案。

这种媒体询问，使得风格应答的以适应用户偏好。

:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  /* dark mode styles */
}
           

更好的是，添加了color-scheme将默认表单控件主题从亮切换到暗(仅在Safari中受支持)。

逻辑属性

在多语言网站上工作时，我们需要同时支持从左到右(LTR)和从右到左(RTL)布局。

考虑下面的例子。

我们有一个包含以下内容的组件:

• 填充(左侧和右侧)
• 左侧的边框
• 图标的边距

有了CSS逻辑属性，我们可以编写一次CSS，它会反应灵敏转换为用户的首选语言。

.card {
  padding-inline-start: 2.5rem;
  padding-inline-end: 1rem;
  border-inline-start: 6px solid blue;
}

.card__icon {
  margin-inline-end: 1rem;
}
           

您可以在中了解有关CSS逻辑属性的更多信息我的文章，和我的详尽的指南为RTL网站写CSS。

防御性CSS

我们编写的CSS也应该响应用户内容。如果太长了，该怎么办？我们需要尽早做出这些决定。

我的项目防御性CSS都是为了这个。一定要看一看！

结论

响应式设计不是关于媒体的询问。是时候改变我们的思维模式，充分发挥现代CSS的潜力了。我认为在未来，我们可能需要媒体查询一般的东西，如网站标题，其余的可以响应大小容器查询，调整大小，谁知道会有什么新功能登陆。

最后

一台电脑,一个键盘,尽情挥洒智慧的人生;几行数字,几个字母,认真编写生活的美好;一 个灵感,一段程序,推动科技进步,促进社会发展。

创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。