大家好，我是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;
}
这里有三个很好的细节:
- 它有条件地换行。没有空间？好吧，把东西包起来。
- 在水平和垂直样式中保持居中。
- 这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更好的了。