带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（5）https://developer.aliyun.com/article/1340892?groupCode=taobaotech
看上去是不错，但问题是，只有当视窗宽度大于一个特定的值时（常指的分辨率断点值），相应的组件变体才会生效， 比如当视窗宽度大于700px时，. card--vertical卡片UI效果才生效； 当视窗宽度大于1024px时，. card--featured卡片UI效果才生效。换句话说，如果要在平板端看到.card--featured卡片效果就无法看到，因为它的媒体查询在 1024px 或更大的视窗宽度下才会生效。
不仅如此，Web的内容是动态的，有的时候输出的内容可能和设计预定的卡片数量不相符合，那么在这种情况之下，要么会有一个空的空间，要么卡片会扩展以填补容器的剩余（或可用）空间。比如我们这个示例中，在视窗宽度为 700px 或更大的视窗宽度中，.card--vertical 和 .card--featured 都有可能出现这样的场景。
针对这样的场景，Web设计师可能更希望有额外的UI效果给卡片。这部分我们放到下一节来聊。
简单地说，目前的响应式 Web 设计主要方案还是利用 CSS 媒体查询特性在不同的终端上提供布局的切换。虽然他能满足 Web 页面布局大部分场景，但也相对丧失了一些其他能力，比如说将响应式的样式注入到组件本身的能力。换句话说，基于视窗宽度查询构建的响应式Web页面，尤其是响应式组件，其能力是有限的。
CSS 媒体查询的不足
在上一节中我们一起探讨了 Web 开发者可以借助于 CSS 媒体查询特性来查询视窗宽度（或设备其他特性）为Web 页面在不同终端提供差异化的布局。但也暴露出很多不足之处，甚至是明显的能力不足。就拿前面示例来说， 卡片组件有三种差异化的UI效果，这些差异化的UI效果是取决于浏览器视窗宽度，也就意味着卡片组件不能根据其父容器宽度去调整 UI 风格。这就限制了开发者 只能在视窗宽度大于某个特定值时（断点） 使用一个组件的特定样式。例如视窗宽度到达 700px 或大于700px时，卡片组件从默认的.card（水平）状态切换到垂直（.card--verti- cal）状态。也就是说，如果我们想在小于700px宽度的视窗下，使用垂直状态（.card--vertical）卡片效果是不行的：
带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（7）https://developer.aliyun.com/article/1340890?groupCode=taobaotech
