CSS @container 查询：组件级响应式布局，再也不怕“爸妈的审美”了！
各位前端的兄弟姐妹们，夜深人静的时候，你是不是也常常对着屏幕，看着那一坨坨为了适配不同屏幕尺寸而写的媒体查询，头皮发麻，感觉自己像个被困在像素迷宫里的仓鼠？
别慌，今天我们要聊一个能让你摆脱这种困境的利器——CSS @container 查询。
听起来有点高大上？别怕，咱们用人话说就是：以后咱们可以不看“爸妈”（父元素）的脸色，自己决定怎么展示了！
媒体查询的“爱恨情仇”：
在 @container 查询出现之前，我们做响应式布局，靠的就是媒体查询。媒体查询的思路是：
“喂，浏览器，屏幕的宽度大于 768px 了吗？是？那我就把这个元素的颜色改成粉红色！小于 768px 了？好，改成屎黄色！”
这种方式简单粗暴，但也有几个让人抓狂的问题：
-
“爸妈的审美决定我的命运”： 媒体查询是基于视口（viewport）的尺寸来判断的。这意味着，一个组件的样式完全取决于整个屏幕的大小，而不是组件本身所在的容器。比如说，一个按钮，无论它是在一个窄小的侧边栏里，还是在一个宽敞的主内容区域里，它都会根据屏幕的尺寸来调整样式。这就像是你的发型，不是根据你的脸型来设计的，而是根据你家房子的尺寸来设计的，听起来就很离谱，对不对？
-
代码混乱不堪： 当页面上的组件越来越多，每个组件都需要根据不同的屏幕尺寸来调整样式时，你的 CSS 文件就会变得异常臃肿，充斥着大量的媒体查询。想象一下，每次修改一个组件的样式，你都需要在茫茫代码海中找到对应的媒体查询，然后小心翼翼地修改，生怕一不小心就影响了其他组件的展示。这简直就是一场噩梦！
-
组件复用困难： 因为组件的样式是和屏幕尺寸紧密耦合的，所以你很难将一个组件直接放到另一个项目中复用。你必须先分析新项目的屏幕尺寸，然后修改组件的媒体查询，才能保证它在新项目中也能正常显示。这就像是把你的衣服拿到别人家穿，还得先量量别人家的衣柜尺寸，然后把衣服改小或者改大，才能塞进去。
@container 查询：解放组件的“独立宣言”
@container 查询的出现，就是为了解决这些问题的。它允许我们根据 组件所在的容器 的尺寸来调整组件的样式，而不是整个视口的尺寸。
这就像是给你一个“独立宣言”，你可以根据自己所处的环境，来决定自己应该怎么展示。
用大白话说，就是：“我不管屏幕有多大，我只看我所在的容器有多大！容器大了，我就展示多一点内容；容器小了，我就展示少一点内容。”
@container 查询的语法：
@container 查询的基本语法如下：
/* 1. 定义一个容器 */
.container {
container-type: inline-size; /* 或者 size */
container-name: my-container; /* 可选，给容器起个名字 */
}
/* 2. 使用 @container 查询 */
@container my-container (min-width: 300px) {
/* 当容器的宽度大于等于 300px 时，应用这些样式 */
.element {
color: blue;
}
}
@container my-container (max-width: 600px) {
/* 当容器的宽度小于等于 600px 时，应用这些样式 */
.element {
font-size: 14px;
}
}让我们来拆解一下：
-
定义容器： 首先，我们需要告诉浏览器，哪个元素是容器。我们使用
container-type属性来定义容器的类型。inline-size表示容器的尺寸是根据其内联方向来确定的（通常是宽度）。size表示容器的尺寸是根据其块方向和内联方向来确定的（宽度和高度）。container-name属性是可选的，你可以给容器起一个名字，方便在@container查询中使用。 -
使用
@container查询： 接下来，我们就可以使用@container查询来根据容器的尺寸来调整组件的样式了。@container后面跟着容器的名字（如果你定义了的话），然后是查询条件，查询条件和媒体查询的语法类似，可以使用min-width、max-width、min-height、max-height等属性。
@container 查询的优势：
-
组件级别的响应式：
@container查询让我们可以针对单个组件进行响应式设计，而不是针对整个屏幕。这使得组件的样式更加灵活，可以更好地适应不同的布局。 -
代码更简洁： 使用
@container查询可以减少 CSS 文件中媒体查询的数量，使代码更加简洁易懂。 -
组件复用性更高： 因为组件的样式是和容器的尺寸相关的，而不是和屏幕的尺寸相关的，所以我们可以更容易地将一个组件放到另一个项目中复用。
举个栗子： 卡片组件的“变形记”
假设我们要创建一个卡片组件，它包含一张图片、一个标题和一段描述文字。我们希望在容器宽度足够大的时候，图片显示在左边，标题和描述文字显示在右边；在容器宽度比较小的时候，图片显示在上面，标题和描述文字显示在下面。
使用 @container 查询，我们可以这样实现：
<div class="container">
<div class="card">
<img src="image.jpg" alt="Image">
<h2>Card Title</h2>
<p>This is a description of the card.</p>
</div>
</div>.container {
container-type: inline-size;
width: 500px; /* 先给容器一个初始宽度，方便演示 */
}
.card {
display: flex;
border: 1px solid #ccc;
padding: 10px;
}
.card img {
width: 150px;
height: 150px;
object-fit: cover;
}
.card h2 {
margin-top: 0;
}
/* 当容器的宽度大于等于 400px 时，应用这些样式 */
@container (min-width: 400px) {
.card {
flex-direction: row; /* 水平排列 */
}
.card img {
margin-right: 10px;
}
}
/* 当容器的宽度小于 400px 时，应用这些样式 */
@container (max-width: 399px) {
.card {
flex-direction: column; /* 垂直排列 */
}
.card img {
margin-bottom: 10px;
}
}在这个例子中，我们首先给 .container 元素定义了一个 container-type: inline-size，表示它是一个容器。然后，我们使用 @container 查询来根据容器的宽度来调整 .card 组件的布局。
当容器的宽度大于等于 400px 时，我们将 .card 组件的 flex-direction 设置为 row，使其水平排列。当容器的宽度小于 400px 时，我们将 .card 组件的 flex-direction 设置为 column，使其垂直排列。
这样，无论 .card 组件放在哪个容器里，它都会根据容器的宽度来自动调整布局，是不是很方便呢？
@container 查询的局限性：
虽然 @container 查询很强大，但它也有一些局限性：
-
兼容性问题：
@container查询的兼容性目前还不是很好，需要使用一些 polyfill 来兼容旧版本的浏览器。不过，随着浏览器的不断更新，相信@container查询的兼容性会越来越好。 -
学习成本：
@container查询的语法和概念相对来说比较新，需要一定的学习成本。不过，只要你掌握了基本的语法，就可以轻松地使用它来创建响应式布局。
总结：
@container 查询是 CSS 领域的一项重大突破，它让我们可以更加灵活地创建响应式布局，摆脱了媒体查询的束缚。虽然它目前还存在一些局限性，但相信随着技术的不断发展，它将会成为前端开发中不可或缺的一部分。
下次当你再对着那一坨坨的媒体查询头皮发麻的时候，不妨试试 @container 查询，它可能会给你带来意想不到的惊喜！
最后，希望这篇文章能帮助你更好地理解 @container 查询，并能在你的项目中灵活运用它。记住，拥抱新技术，才能更好地应对前端开发的挑战！