带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（25）

带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（24）https://developer.aliyun.com/article/1340870?groupCode=taobaotech

容器查询使我们不再只考虑浏览器视窗尺寸大小，而是允许任何组件或元素对定义的容器尺寸做出响应！

也就是说，有了CSS容器查询，你就能以一种非常精确和可预测的方式定义一个组件的全部样式。

设计时考虑容器查询

虽然响应式设计给Web设计师带来了更多的可有性，但响应式设计还是有很多的局限性。对于Web设计师而言，更  期待的是能够根据组件容器尺寸来提供不同的设计风格。依旧拿卡片组件来举例：

也就是说，CSS容器查询特性来了之后，作为一名Web设计师，在设计Web页面（或组件）时，就需要基于容器尺寸考虑如何设计。这样一来，可以向Web开发人员提供组件的细节和变化，Web开发人员也可以基于这些细节进  行编码（进行开发）。

不过，这并不意味着容器查询特性之后响应式设计是就失去了意义。在未来，容器查询和响应式设计是共存的，简单地说，Web设计师在设计组件时可能会将组件分为以下几个部分：

1. 基于视窗（CSS媒体查询）
   
2. 基于容器（CSS容器查询）
   
3. 通用型（不受影响的组件）
   

比如：

带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（26）https://developer.aliyun.com/article/1340867?groupCode=taobaotech