带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（21）https://developer.aliyun.com/article/1340874?groupCode=taobaotech
容器查询卡片
我想大家对容器查询的理论和概念有了一个初步的认识。接下来，我们把这些东西放到一起，来具体看看前面展示的容器卡片示例是如何实现的。
自从响应式 Web 设计的出现以及移动终端设备越来越多，在设计中也有移动端优先（Mobile First）还是桌面端优先（Desktop First）的争执：
如果你对这方面讨论感兴趣，可以阅读 Ahmad Shadeed 的 《The State Of Mobile First and Desktop First》一文。
（地址：https://ishadeed.com/article/the-state-of-mobile-first-and-desktop-first/）
就我个人而言，到目前为止，在开发跨组件状态的“断点”时，将容器查询与考虑“移动端优先”的设计是最有意义的。也就是说，将最窄的视图作为默认样式，然后通过容器查询处理更大宽度的样式更新。
如上图所示，我们从左往右来实现卡片不同状态断点下的UI效果。先从最窄的卡片开始（最左侧，Default状态）。构建这个卡片组件，所需要的 HTML 结构如下：
<div class="card__container"> <div class="card"> <img src="https://picsum.photos/2568/600?random=1" width="2568" height="600" alt="" class="card__thumbnail" /> <h3 class="card__title">Container Queries Rule</h3> <p class="card__describe">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis magni eveniet natus nulla distinctio eaque?</p> <button class="card__button">Order now</button> 7 </div> </div>
我们通过 CSS Grid 来完成卡片的布局。先从最窄的开始，添加下面CSS代码：
.card { display: grid; gap: 1rem; margin: 5vh auto; border-radius: 0.5rem; box-shadow: 0 0.25rem 0.5rem -0.15rem hsla(0 0% 0% / 55%); background-color: #fff; } .card__thumbnail { max-width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 0.5rem 0.5rem 0 0; } .card__title { font-weight: 700; font-size: clamp(1.2rem, 1.2rem + 3vw, 1.5rem); padding: 0 20px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .card__describe {
尝试调整上面示例中视窗的大小：
带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（23）https://developer.aliyun.com/article/1340872?groupCode=taobaotech
