带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（25）https://developer.aliyun.com/article/1340868?groupCode=taobaotech
在未来，Web设计师给Web开发者投喂的设计稿可能就会像下图这样了：
或许因为容器查询的到来，设计师在设计Web的时候，也可能会做出相应的调整。投喂给Web开发的设计稿也可能 会和以往的模式有所差异。那么这个时候，Web开发者就需要具备正确理解设计师的意图了。比如，Web设计师可 能在未来的设计中会提供向下图的卡片组件设计：
作为Web开发人员，看到上图设计效果，需要改变以往对设计图意图的理解，不能继续执着于基于视窗尺寸来调整组件UI。
上图是基于视窗的一种开发模式，需要为卡片组件设置不同的类名，并且基于视窗尺寸，在相应的类名下调整卡片组件UI。有了容器特性时，我们可以基于现代的Web布局技术，比如Flexbox或Grid布局，让卡片组件基于其容器 来调整其UI：
正如上图所示，可以基于视窗大小采用CSS媒体查询特性，Flexbox或Grid布局等技术改变卡片容器.card__con- tainer的大小，从而让卡片组件根据其容器尺寸大小做出相应响应。
拥有一个能根据其父容器尺寸做出响应（UI调整）的组件是非常有用的，正如你看到的，我们可以只构建一个组件，就可以满足不同视窗布局下的设计诉求！
带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（27）https://developer.aliyun.com/article/1340866?groupCode=taobaotech
